React应用中addEventListener无法触发事件的问题求助

嘿，我看到你遇到的问题了，咱们一步步来拆解解决～

首先先看你提供的示例代码，直接导致事件没触发的原因是事件名称写错了：原生DOM的addEventListener方法里，事件名是不带on前缀的——onClick是React合成事件的写法，原生监听应该用click。

修正后的示例代码如下：

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.buttonRef = React.createRef();
  }

  componentDidMount() {
    // 把"onClick"改为原生事件名"click"
    this.buttonRef.current.addEventListener("click", e => {
      console.log("click事件触发啦", e);
    });
  }

  render() {
    return <button ref={this.buttonRef}>click me</button>;
  }
}

export default App;

这样点击按钮就能正常触发事件处理函数了。

接下来回到你真正的需求：处理自定义Web组件的事件。这里要注意React的一个小特性：React的合成事件系统（也就是你一开始尝试的<custom-button onClick={...}>写法）并不支持自定义Web组件的自定义事件，也不会自动把on*属性绑定为原生事件监听，所以确实需要用原生的事件监听方式，但还要注意这几点：

• 确认自定义Web组件触发的事件名称准确（比如组件内部触发的是custom-click，那监听时就用这个名字，同样不要加on前缀）
• 一定要在组件挂载完成后再添加监听（类组件用componentDidMount，函数组件用useEffect），确保DOM元素已经存在
• 记得在组件卸载时移除监听，避免内存泄漏

类组件处理自定义Web组件事件示例 #

假设你的<custom-button>会触发custom-click事件，代码可以这么写：

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.customButtonRef = React.createRef();
    this.handleCustomClick = this.handleCustomClick.bind(this);
  }

  componentDidMount() {
    this.customButtonRef.current.addEventListener("custom-click", this.handleCustomClick);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，防止内存泄漏
    this.customButtonRef.current.removeEventListener("custom-click", this.handleCustomClick);
  }

  handleCustomClick(e) {
    console.log("自定义组件事件触发", e.detail);
  }

  render() {
    return <custom-button ref={this.customButtonRef}>触发自定义事件</custom-button>;
  }
}

export default App;

函数组件处理自定义Web组件事件示例 #

如果是用函数组件开发，搭配useRef和useEffect来实现：

import React, { useRef, useEffect } from "react";

function App() {
  const customButtonRef = useRef(null);

  const handleCustomClick = (e) => {
    console.log("自定义组件事件触发", e.detail);
  };

  useEffect(() => {
    const buttonEl = customButtonRef.current;
    if (buttonEl) {
      buttonEl.addEventListener("custom-click", handleCustomClick);
      // 返回清理函数，组件卸载时移除监听
      return () => {
        buttonEl.removeEventListener("custom-click", handleCustomClick);
      };
    }
  }, []);

  return <custom-button ref={customButtonRef}>触发自定义事件</custom-button>;
}

export default App;

关键总结 #

• 原生DOM事件监听的事件名不要加on前缀，这是你示例代码失效的核心原因
• React合成事件不兼容自定义Web组件的事件，必须使用原生addEventListener/removeEventListener
• 务必在正确的时机添加/移除监听，避免内存泄漏问题

内容的提问来源于stack exchange，提问作者Carl Rippon