React下拉菜单ClickEvent触发两次，contains()返回值异常求助

看起来你遇到了两个核心问题：一是点击下拉菜单内部元素时handleClick执行了两次，二是有时contains()会返回false。咱们一步步拆解原因和解决方案：

1. 事件监听重复绑定导致执行多次 #

你在componentWillMount里用this.handleClick.bind(this)绑定事件，每次调用bind()都会生成一个全新的函数实例。这就造成了：

• 组件挂载时，给document添加了监听函数A
• 组件卸载时，你移除的是bind()新生成的函数B，而非原来的A
• 如果组件多次挂载/卸载，document上会残留多个监听函数，点击时自然会执行多次

解决方案：提前绑定函数 #

有两种可靠方式避免这个问题：

• 在构造函数里一次性绑定：

constructor(props: IProps) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

之后在生命周期里直接使用绑定好的函数：

componentWillMount() {
  document.addEventListener('click', this.handleClick, false)
}
componentWillUnmount() {
  document.removeEventListener('click', this.handleClick, false)
}

• 或者用箭头函数定义handleClick，利用箭头函数自动绑定this的特性：

handleClick = (e: any) => {
  // 你的原有逻辑
}

这种方式无需手动bind，直接添加/移除监听即可。

2. contains()返回false的原因及事件逻辑优化 #

你在document的监听函数里调用e.stopPropagation()是无效的——因为事件已经冒泡到document了，此时阻止传播已经晚了。正确的思路是：在下拉菜单内部元素的点击事件里阻止冒泡，这样document的监听就不会被触发；或者在handleClick里准确判断点击区域。

另外，contains()偶尔返回false的情况，大概率是监听重复导致的二次执行干扰了判断，解决监听重复问题后这个现象应该会消失。如果还有问题，可以检查Comp组件内部是否使用了Portal或自行阻止了事件冒泡，这会导致后代元素脱离Wrapper的DOM范围。

优化后的handleClick逻辑 #

handleClick = (e: any) => {
  // 检查点击目标是否属于下拉菜单内部
  if (this.dropdown.current?.contains(e.target)) {
    // 内部点击，保持展开状态
    return;
  }
  // 外部点击，执行关闭逻辑
  console.log("点击了下拉区域外部，关闭菜单");
  // 这里添加你的关闭状态逻辑，比如 setState({ isOpen: false })
}

如果需要彻底阻止内部事件冒泡到document，可以给内部元素添加点击事件处理：

<div 
  className="divdiv" 
  style={{height: '5rem', width: '5rem', backgroundColor: 'red'}}
  onClick={(e) => e.stopPropagation()}
></div>

3. 额外建议：使用React新生命周期函数 #

componentWillMount已被标记为过时（deprecated），建议换成componentDidMount来添加事件监听——它只会在客户端组件挂载完成后执行一次，避免服务器端渲染时的重复执行问题：

componentDidMount() {
  document.addEventListener('click', this.handleClick, false)
}
componentWillUnmount() {
  document.removeEventListener('click', this.handleClick, false)
}

总结一下，先解决事件监听重复绑定的问题（这是函数执行两次的核心原因），再调整事件阻止逻辑，就能实现点击页面非下拉区域自动关闭菜单的效果了。

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