如何解决React - 如何防止 onMouseDown 事件侦听器停止执行 onClick JSX 函数?
我目前遇到一个问题,即由于父组件中定义的 mousedown 事件侦听器,子 React 组件的按钮的 onClick 函数没有被触发。 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>
对解决此问题的任何帮助将不胜感激,谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。