React - 如何防止 onMouseDown 事件监听器停止 onClick JSX function 执行？

Question

我目前遇到一个问题，即由于在父组件中定义的 mousedown 事件侦听器，未触发子反应组件按钮的 onClick function 的问题。 mousedown 事件监听器关闭父组件中定义的下拉菜单。 这似乎干扰了子组件的按钮，因为当我删除鼠标按下事件侦听器时，按钮的 onclick 似乎再次起作用。 这是代码的简化版本：

// Parent Component
this.moreContainerRef = React.createRef();

handleClickOutside(event) {
    const clickedOutsideDropdown =
      this.moreContainerRef.current &&
      !this.moreContainerRef.current.contains(event.target);
    if (!clickedOutsideDropdown) return;
    this.setState({ moreMenuOpen: false });
}
componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

// In the render function
{moreMenuOpen && (
  <div className="more-dropdown">
    <ul>
      <button
        type="button"
        className="btn more-dropdown-button btn-light">
          Button
      </button>
    </ul>
  </div>
)}

// Child Component
<button onClick={() => functionNotBeingCalled()}>
  Child Button
</button> 
                    

任何解决此问题的帮助将不胜感激，谢谢。

Answer 1

Mousedown 事件在 onClick 事件之前触发，因此它将首先触发，因此您的菜单将关闭，并且不会触发 onClick 事件。 作为一种解决方法，您可以将 setState 包装为在setTimeout function 上关闭菜单，以不立即关闭菜单并实际触发 onClick 事件。 虽然不是最干净的解决方案。

Answer 2

我通过使用click事件侦听器而不是mousedown解决了这个问题。

所以改变这个：

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

对此：

componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
}