Reactjs onBlur-navbar

Question

这是点击前的初始状态。

this.state = {
      isNavOpen: false
};

这就是应该如此工作的切换器

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

这个导航栏我想在它的onblur时崩溃，但不知道为什么我会收到错误。

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>

Answer 1

根据你的错误描述和你的代码，看起来你错过了bind的setTimeout。试试看：

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

Answer 2

感谢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”