reactjs – react中的onMouseDown事件不会触发状态更改但onClick会触发

JSX部分看起来像这样：

<span className="header_srh_i_c" onMouseDown={this.toggleSearchbar}>
    <i className="fa fa-search"
        id="searchButton"
        name="searchButton"
     />
 </span>

同一组件中的函数如下所示：

toggleSearchbar(event){
    const eventType = event.type;
    if(this.state.showSearch && this.props.q && length(this.props.q) > 0){
      this.toggleSearching();
    }else{
      console.log("state after",this.state.showSearch)  //false

      this.setState({showSearch:!this.state.showSearch},function (event) {
      console.log("state after",this.state.showSearch) //false
      })
    }
  }

执行后,国家仍然是错误的事件

this.setState({showSearch:!this.state.showSearch},function (event) {
          console.log("state after",this.state.showSearch) //false
          })

但是,如果我使用onClick而不是onMouseDown,它的工作正常

解决方法

尝试

this.setState(prev => ({showSearch: !prev.showSearch}),function(){.....})

代替

this.setState({showSearch:!this.state.showSearch},this.state.showSearch) //false
      })