Reactjs on模糊导航栏

这是单击之前的初始状态

this.state = {
      isNavOpen: false
};

这是一个按部就班的开关

 toggleNav() {
    this.setState({
      isNavOpen: !this.state.isNavOpen
    });
  }

这个导航栏我想在它模糊时崩溃，但不知道为什么会出错

onBlur(e) {
         var currentTarget = e.currentTarget;
         setTimeout(function() {
           if (!currentTarget.contains(document.activeElement)) {
             this.setState({
               isNavOpen: this.state.isNavOpen
             });
           }
         }, 0);
       }

这是我希望在单击链接时启用模糊的元素

<NavbarToggler onClick={this.toggleNav} tabIndex="1" onBlur={this.onBlur} />
<Collapse isOpen={this.state.isNavOpen} navbar>

---

根据错误描述和代码，您似乎缺少

设置超时的
绑定。试试看：

onBlur(e) {
   var currentTarget = e.currentTarget;
   setTimeout(function() {
     if (!currentTarget.contains(document.activeElement)) {
       this.setState({
         isNavOpen: !this.state.isNavOpen
       });
     }
   }.bind(this), 0);
}

多亏了Ramiz解决方案，它消除了错误，但模糊不起作用，所以我对其进行了如下更改：

  onBlur(e) {
       var currentTarget = e.currentTarget;
       setTimeout(function() {
         if (!currentTarget.contains(document.activeElement)) {
           this.setState({
             isNavOpen: !this.state.isNavOpen
           });
         }
       }.bind(this), 0);
    }

此“isNavOpen:！This.state.isNavOpen”
您会遇到什么错误？是否将isNavOpen定义为
onBlur
？是否绑定了此方法？TypeError:无法读取未定义this.toggleNav=this.toggleNav.bind（this）的属性“isNavOpen”；this.onBlur=this.onBlur.bind（this）；this.state={isNavOpen:false}；但是您在
setTimeout
中调用的
this
是指构造函数中的
setTimeout
范围，我也有this.onBlur=this.onBlur.bind（this）；是的，这是能够在
onBlur
中调用例如
this.setState
所必需的。由于您是在
setTimeout
中调用它，因此还需要将其绑定到组件范围。