有多种方法可以将您的函数绑定到 React 类的词法上下文，

• 一种这样的方法是在构造函数中绑定它，

• 另一种方法是使用类字段作为箭头函数，并且

• 使用 .bind 或箭头在渲染中绑定的第三种方法，

每个都可以使用，但是最好避免在渲染中绑定，因为每次渲染都会返回一个新函数

使用类字段作为箭头函数。

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

在渲染中绑定

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

或者

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

是this.onClickMe = this.onClickMe.bind(this);仍然是我必须做的？

你不有，如果你使用箭头功能，捕捉词汇做到这一点this。但它被认为是最佳实践，因为它允许您避免在内部创建函数render。

render() {
    return (
      <button
        /* creates new function on every render call*/
        onClick={ () => { this.onClickMe() } }
        type="button"
      >
        Click Me
  </button>
    );
  }

对比

constructor() {
    super();

    // creates function once per component instance
    this.onClickMe = this.onClickMe.bind(this);
  }

在您的情况下，您不需要，因为您使用箭头函数 wherethis绑定到定义箭头函数的上下文 - 在这种情况下是您的组件。

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

当您在没有任何绑定的情况下传递函数时，这是必要的，因此它可能会在this指向另一个对象的地方被调用。