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

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

我认为这可能会有所帮助。在侧边栏组件中，使用onMouseOver || onMouseLeave侧边栏补偿closeSidebar=()=>{this.setState({show:false})}return(<div&nbsp; onMouseLeave={this.closeSidebar} >sidebar</div>)export default Sidebar