javascript - React binding this to a class method

Question

So i'm reading a book on React which said I have to bind my methods like

this.onClickMe = this.onClickMe.bind(this);

but it looks to work just fine without using the above code

class ExplainBindingsComponent extends Component {
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={ () => { this.onClickMe() } }
        type="button"
      >
        Click Me
  </button>
    );
  }
}

but it's saying I should do something like this,

class ExplainBindingsComponent extends Component {
  constructor() {
    super();
    this.onClickMe = this.onClickMe.bind(this);
  }
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={this.onClickMe}
        type="button"
      >
        Click Me
  </button>
    );
  }
}

is this.onClickMe = this.onClickMe.bind(this); still something I have to do? and if so what does it do vs my above example

Answer 1

There are multiple ways to bind your function to the lexical context of the React class,

• one such method is to bind it in the constructor,

• other method is to use class fields as arrow functions, and

• the third way to bind in the render using .bind or arrow,

Each of these can be used, however its best to avoid binding in the render since a new function is returned on each render

Using class field as arrow function.

class ExplainBindingsComponent extends Component {
  onClickMe = () => {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={ this.onClickMe }
        type="button"
      >
        Click Me
  </button>
    );
  }
}

Binding in render

onClick={() => this.onClickMe() }

or

onClick={this.onClick.bind(this)}