in Education by
How to bind methods or event handlers in JSX callbacks?

1 Answer

0 votes
by

There are 3 possible ways to achieve this:

  1. Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for React event handlers defined as class methods. Normally we bind them in constructor.

    class Component extends React.Component {
      constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() {
        // ...
      }
    }
  2. Public class fields syntax: If you don't like to use bind approach then public class fields syntax can be used to correctly bind callbacks.

    handleClick = () => {
      console.log('this is:', this)
    }
    <button onClick={this.handleClick}>
      {'Click me'}
    </button>
  3. Arrow functions in callbacks: You can use arrow functions directly in the callbacks.

    <button onClick={(event) => this.handleClick(event)}>
      {'Click me'}
    </button>

Note: If the callback is passed as prop to child components, those components might do an extra re-rendering. In those cases, it is preferred to go with .bind() or public class fields syntax approach considering performance.

Related questions

0 votes
    What is JSX?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    How to pass a parameter to an event handler or callback in REACT?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the difference between HTML and React event handling?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the purpose of callback function as an argument of setState()?...
asked Jun 2, 2021 in General by JackTerrance
0 votes
    Why should we not update the state directly in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the difference between state and props in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What are props in React?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is state in React JS?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What are Pure Components in React js1?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    When to use a Class Component over a Function Component?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    What is the difference between Element and Component?...
asked Jun 2, 2021 in Education by JackTerrance
0 votes
    Why does the Node rely on event handlers? (a) APIs are synchronous (b) APIs are asynchronous (c) ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Oct 23, 2021 in Education by JackTerrance
0 votes
    What is the purpose of the event handlers in the JavaScript? (a) Adds innerHTML page to the code ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Oct 23, 2021 in Education by JackTerrance
0 votes
    The process by which the browser decides which objects to trigger event handlers on is ____________ (a) ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Oct 22, 2021 in Education by JackTerrance
...