Question

在这个例子中，我们需要绑定＆＃39;这个＆＃39; handleClick（）的对象到全局范围：

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（）是在组件的范围内定义的，因此我们不需要指定＆＃39; this＆＃39;这个函数的对象，因为它已经引用了组件本身？

Answer 1

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

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

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};

为什么我们需要绑定这个＆＃39; for JSX callbacks

1 个答案: