javascript - 如何使用 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

我通过下面的链接关注了这篇文章，它有效。

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