如何使用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  onMouseLeave={this.closeSidebar} >sidebar</div>

)

export default Sidebar