当我单击文档中的其他任何位置时,我想关闭侧面板。
我有一个侧面板,单击按钮时将打开该侧面板,单击同一按钮时将关闭该侧面板。但是,即使单击文档中的其他任何位置,我也想关闭侧面板。
我尝试过使用 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/>
});
最佳答案
我通过下面的链接关注了这篇文章,它有效。
关于javascript - 如何使用 React 单击文档中的任意位置关闭侧面板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55581517/