Unbind click in react

Question

I have a question. How I can unbind the click of element in react? I have button, when I click on it, it increases score + 1, and after this click I want to remove it. How I can do this?

Help me please!

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 2,
      score: 0
    };
    
    this.getRes = this.getRes.bind(this);
  }
  

 
  
  getRes() {
    if (this.state.result == 2) {
      this.setState({score: this.state.score+1})
      
      this.getRes.unbind(this);
      
    }
  }

  render() {
    return (
      <div>
      <div style={{paddingTop: 10}}>
        <p>
        <button>1</button>
        <button onClick={this.getRes}>{this.state.result}</button>
        </p>
        
          <p>
        <button>1</button>
        <button onClick={this.getRes}>{this.state.result}</button>
        </p>
        
        
        <p>{this.state.score}</p>
        
        </div>
        </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

don't unbind the event, just use state and logic to see if you have incremented yet, and if you already have, just make the function noop — r3wt
– r3wt, Commented Sep 19, 2019 at 17:06
when would this.state.score == this.state.score be false ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Sep 19, 2019 at 17:06
If you don't want a click-handler on an element, then don't add a click-handler to that element. In React you do not mutate/change the DOM. You tell react how the (new) DOM should look like (either with or without click-handler) and let react take the necessary steps to get there. — Thomas
– Thomas, Commented Sep 19, 2019 at 17:07

SLaks · Accepted Answer · 2019-09-19 17:06:04Z

4

In React, you change your UI by making render() describe the new state, not by manually binding or unbinding or changing things.

Change your render() method to only pass this.getRes to onClick if you want the handler to by bound:

onClick={... ? this.getRes : null}

answered Sep 19, 2019 at 17:06

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rapprogtrain Over a year ago

what to put instead 3 dots?

SLaks Over a year ago

@rapprogtrainsite: Whatever condition you want.

Collectives™ on Stack Overflow

Unbind click in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related