Question

当我单击文档中的任何其他位置时，我想关闭侧面板。

我有一个侧面板，单击一个按钮将打开，单击相同的按钮将关闭。但是，即使单击文档中的其他任何位置，我也要关闭侧面板。

我尝试使用有效的document.addeventlistener('mousedown', handle_toggle)，但即使单击侧面板本身，它也会关闭侧面板。

我该如何解决它，使其在单击侧面板时不会关闭？

下面是代码：

this.state = {
    side_panel_open: false,
};

componentDidUpdate () {
    if(this.state.side_panel_open) {
        document.addEventListener('mousedown',this.toggle_side_panel);
    }
}
handle_btn_click = () => {
    this.setState({side_panel_open: !side_panel_open});
}
toggle_side_panel = () => {
    this.setState({side_panel_open: false});
}
return (
<button onClick={this.handle_btn_click}>
    click me 
</button>
{this.state.side_panel_open && 
    <Sidepanel/>
});

Answer 1

我通过下面的链接关注了这篇文章，并且可以正常工作。

https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-react-component-5604830beb7f

Answer 2

我认为这可能会有所帮助。

在侧边栏组件中，使用onMouseOver || onMouseLeave

侧边栏补偿

closeSidebar=()=>{
this.setState({show:false})
}

return(
<div  onMouseLeave={this.closeSidebar} >sidebar</div>
)
export default Sidebar

如何使用react在文档中的任何位置单击以关闭侧面板？

2 个答案: