自定义事件在React中怎么触发和监听？

承锐 Dev 提问于 2026-03-31 09:18:16 阅读 4

前端

我在React里想用自定义事件实现父子组件通信，但试了几次都没反应，不知道是不是用法不对。

我用new CustomEvent创建了一个事件，在子组件里dispatchEvent，父组件用addEventListener监听，但回调根本没执行。是不是React不支持这种方式？

const Child = () => {
  const handleClick = () => {
    const event = new CustomEvent('myEvent', { detail: { msg: 'hello' } });
    document.dispatchEvent(event); // 尝试在document上触发
  };
  return <button onClick={handleClick}>触发自定义事件</button>;
};

// 父组件里
useEffect(() => {
  const handler = (e) => console.log(e.detail.msg);
  document.addEventListener('myEvent', handler);
  return () => document.removeEventListener('myEvent', handler);
}, []);

DOM操作自定义事件

我来解答赞 7 收藏

反馈

1 条解答

端木雯雯 Lv1

在React里直接用 document.dispatchEvent 触发自定义事件确实不太靠谱。前端这块，React有自己的状态管理和通信方式。

最简单的办法是用回调函数来做父子组件通信。在父组件里定义个函数传给子组件：

const Parent = () => {

  const handleEvent = (msg) => {

    console.log('收到消息:', msg);

  };

  

  return <Child onMyEvent={handleEvent} />;

};



const Child = ({ onMyEvent }) => {

  const handleClick = () => {

    if (onMyEvent) onMyEvent('hello from child');

  };

  

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

};

这样写更符合React的设计思路，也省得折腾那些DOM事件监听了。虽然能用原生事件，但太麻烦还容易出错，相信我，用props传递回调才是正道。

说真的，搞前端这么多年，还是觉得跟着框架的套路走最省心。

2026-03-31 09:22