绑定变量到事件监听器回调为何重复触发？如何解决？

• 直接传入callback函数时：所有MyComponent实例使用的是同一个函数引用，调用原生addEventListener时，同一个DOM元素、事件类型与回调函数的组合只会绑定一次，因此点击按钮仅触发一次回调。
• 使用bind传递name时：每次bind都会返回一个全新的函数实例，每个MyComponent实例都会给#btn添加一个独立的事件监听器，点击按钮时所有监听器都会执行，触发次数与组件实例数量一致。

要同时获取name变量与event对象，且避免重复触发问题，可按以下方式处理：

方式1：类组件内用闭包封装回调 #

在组件挂载时创建闭包回调，捕获当前组件的name，同时在组件卸载时移除监听器，避免内存泄漏：

class MyComponent extends React.Component {
  componentDidMount() {
    const targetElement = document.getElementById('btn');
    // 闭包捕获当前组件的name，同时接收event参数
    this.handleCustomEvent = (event) => {
      console.log(this.props.name, event);
    };
    // 绑定自定义事件（替换成你的实际事件名）
    targetElement.addEventListener('your-custom-event', this.handleCustomEvent);
  }

  componentWillUnmount() {
    const targetElement = document.getElementById('btn');
    // 卸载时移除监听器
    targetElement.removeEventListener('your-custom-event', this.handleCustomEvent);
  }

  render() {
    return <div>子组件内容</div>;
  }
}

方式2：函数组件用useEffect管理监听器 #

如果是函数组件，使用useEffect处理事件绑定与清理，结合useCallback确保回调引用稳定：

import { useEffect, useCallback } from 'react';

function MyComponent({ name }) {
  // 用useCallback确保回调引用稳定，避免不必要的重复绑定
  const handleCustomEvent = useCallback((event) => {
    console.log(name, event);
  }, [name]);

  useEffect(() => {
    const targetElement = document.getElementById('btn');
    targetElement.addEventListener('your-custom-event', handleCustomEvent);
    
    // 清理函数：组件卸载或name变化时移除旧监听器
    return () => {
      targetElement.removeEventListener('your-custom-event', handleCustomEvent);
    };
  }, [handleCustomEvent]);

  return <div>子组件内容</div>;
}

方式3：父组件统一绑定全局自定义事件 #

如果自定义事件是全局触发（如window上的事件），可在父组件绑定一次监听器，通过事件携带的数据传递name：

class App extends React.Component {
  componentDidMount() {
    window.addEventListener('your-custom-event', this.handleGlobalEvent);
  }

  componentWillUnmount() {
    window.removeEventListener('your-custom-event', this.handleGlobalEvent);
  }

  handleGlobalEvent = (event) => {
    // 从事件详情中获取传递的name
    const { name } = event.detail;
    console.log(name, event);
  };

  render() {
    return (
      <div>
        <MyComponent name="A" />
        <MyComponent name="B" />
      </div>
    );
  }
}

触发自定义事件时携带对应组件的name数据：

// 触发自定义事件的示例代码
const customEvent = new CustomEvent('your-custom-event', {
  detail: { name: 'A' }
});
window.dispatchEvent(customEvent);

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