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.
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.
3)Arrow functions in callbacks: You can use arrow functions directly in the callbacks.
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}