CODEWITHSUNDEEP
reactjs
systemdebt
systemdebt

Reputation: 4941

onMouseDown event in react does not trigger state changes but onClick does

JSX part looks like this: 

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

function in the same component looks like this:

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
      })
    }
  }

state remains false event after execution of 

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

However, it works just fine if I use onClick instead of onMouseDown

Upvotes: 7

Views: 21035

Answers (1)

Oleh Devua
Oleh Devua

Reputation: 384

try

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

instead of

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

Upvotes: 1

Related Questions