Jul 2, 2019 in React JS
Q:

How to bind methods or event handlers in JSX callbacks?

2 Answers

0 votes
Jul 2, 2019

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.Componenet {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

  1. 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>
  1. Arrow functions in callbacks: You can use arrow functions directly in the callbacks.
<button onClick={(event) => this.handleClick(event)}>
  {'Click me'}
</button>
0 votes
Jan 30
There are 3 possible tricks to achieve this:

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() {

    // ...

  }

}

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>

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
Jul 2, 2019 in React JS
0 votes
Jun 19, 2020 in React JS
...