当前位置：首页 > React

react 如何自定义事件

2026-01-25 13:53:29React

自定义事件的基本概念

在 React 中，自定义事件通常指通过组件间传递回调函数或使用 Context API、事件总线等方式实现的通信机制。React 本身不直接支持类似 DOM 的 CustomEvent，但可以通过组合模式实现类似功能。

通过 Props 传递回调函数

父组件通过 props 向子组件传递回调函数，子组件触发事件时调用该函数。

父组件示例：

function ParentComponent() {
  const handleCustomEvent = (data) => {
    console.log('自定义事件触发，数据:', data);
  };

  return <ChildComponent onCustomEvent={handleCustomEvent} />;
}

子组件示例：

function ChildComponent({ onCustomEvent }) {
  const triggerEvent = () => {
    onCustomEvent({ value: '示例数据' });
  };

  return <button onClick={triggerEvent}>触发事件</button>;
}

使用 Context API 跨组件通信

适用于深层嵌套组件或避免逐层传递 props 的场景。

创建 Context：

const CustomEventContext = React.createContext();

function App() {
  const [eventData, setEventData] = useState(null);

  return (
    <CustomEventContext.Provider value={{ setEventData }}>
      <ChildComponent />
      {eventData && <p>事件数据: {eventData.value}</p>}
    </CustomEventContext.Provider>
  );
}

子组件触发事件：

react 如何自定义事件

function ChildComponent() {
  const { setEventData } = useContext(CustomEventContext);

  const triggerEvent = () => {
    setEventData({ value: 'Context 数据' });
  };

  return <button onClick={triggerEvent}>触发 Context 事件</button>;
}

使用事件总线（Event Emitter）

通过第三方库（如 events）实现全局事件管理。

安装依赖：

npm install events

创建事件总线：

import { EventEmitter } from 'events';
export const eventBus = new EventEmitter();

触发事件：

react 如何自定义事件

eventBus.emit('customEvent', { value: '事件总线数据' });

监听事件：

useEffect(() => {
  const handleEvent = (data) => console.log('收到事件:', data);
  eventBus.on('customEvent', handleEvent);
  return () => eventBus.off('customEvent', handleEvent);
}, []);

自定义 Hook 封装事件逻辑

将事件逻辑封装为可复用的 Hook。

示例 Hook：

function useCustomEvent() {
  const [event, setEvent] = useState(null);

  const dispatchEvent = (data) => {
    setEvent(data);
  };

  return { event, dispatchEvent };
}

使用示例：

function ComponentA() {
  const { dispatchEvent } = useCustomEvent();
  return <button onClick={() => dispatchEvent({ value: 'Hook 数据' })}>触发</button>;
}

function ComponentB() {
  const { event } = useCustomEvent();
  return <div>{event?.value}</div>;
}