reactjs - 当外部单击处理程序“阻止”它时如何处理 onClick 状态更改？

Question

上下文：

我正在使用以下外部点击处理程序：https ://github.com/airbnb/react-outside-click-handler

我有一个标准的侧边栏和一个汉堡按钮，单击时显示/隐藏侧边栏。当我按照文档使用外部单击处理程序包装侧边栏组件时，一切正常，因为我单击画布上的任意位置并隐藏了我的侧边栏。

    //App.js
    <OutsideClickHandler onOutsideClick={this.hideSideBar}>
      <SideBar show={this.state.sideBarOpen}/>
    </OutsideClickHandler>

问题：

对于<OutsideClickHandler>我将一个函数作为道具传递，它将我的侧边栏和汉堡包的状态设置为，false以便每当我在组件外部单击时，它只能隐藏它。我有另一个函数，我的汉堡包onClick事件按照以下代码执行：

sideBarToggler = () => {
    this.setState((prevState) => {
        return { sideBarOpen: !prevState.sideBarOpen, hamburgerOpen: !prevState.hamburgerOpen }})
}

我的汉堡打开<SideBar>罚款，但是当我尝试再次点击汉堡时，我无法关闭，<SideBar>因为我的汉堡在<OutsideClickHandler>. 正如sideBarToggler在汉堡点击时所调用的那样，它会更改状态，但onOutsideClick={this.hideSideBar}也会被调用，并且状态会立即更改回来。我怎样才能修复我写的可憎的东西？

编辑

hideSideBar功能：

hideSideBar = () => {
    this.setState({sideBarOpen: false, hamburgerOpen: false })
}

标签： reactjs