javascript - 为什么我们需要为 JSX 回调绑定(bind) 'this'

Question

这个问题已经有答案了:

Why is JavaScript bind() necessary? (4 个回答)

已关闭 5 年前。

在此示例中，我们需要将 handleClick() 的“this”对象绑定(bind)到全局范围:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

但是，handleClick() 是在组件的范围内定义的，因此我们是否不需要为此函数指定“this”对象，因为它已经引用了组件本身？

Answer 1

你是对的，但你错过了一件事。未绑定(bind)到处理程序的 this 范围是组件。那么当您想要了解事件的背景时会发生什么？你没有它。

解决此问题的另一种方法是按词法绑定(bind)组件，这样您就不必担心手动绑定(bind)每个函数。

handleClick = () => { //arrow function applied
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
}

请注意，现在您也不再需要此处的组件构造函数。

constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
}

现在变成了

state = {isToggleOn: true};