Реагируйте: почему вы должны связать этот метод?

Question

Я читаю эту статью на тему «Поднятие состояния вверх» в React. Он определяет компонент Calculator следующим образом:

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />

        <BoilingVerdict
          celsius={parseFloat(temperature)} />

      </fieldset>
    );
  }
}

В строке this.handleChange = this.handleChange.bind(this); мне интересно, почему мы должны связывать this.handleChange с this. Используется в строке onChange={this.handleChange}. Разве это не сработало бы так же, даже если бы мы не сделали эту привязку?

Answer 1

this внутри handleChange будет ссылаться на метод, а не на экземпляр компонента (Calculator). Поскольку handleChange не имеет метода setState (компонент имеет), мы должны связать правильный this в методе. Если у вас был другой метод, который ничего не делал с this, тогда да, вы можете пропустить привязку.

Из официальных документов:

Если вам нужен доступ к родительскому компоненту в обработчике, вам также необходимо привязать функцию к экземпляру компонента.

Чтобы обойти это, используйте синтаксис жирная стрелка (как в ответе Димитра) или используйте React Hook API

---

Другими словами (см. комментарии):

constructor(props) {
  super(props);
  this.state = {temperature: ''};
}

handleChange(e) {
  this.setState({temperature: e.target.value});
  // ^ this = handleChange. You cannot call setState on handleChange.
}

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
  this.state = {temperature: ''};
}

handleChange(e) {
  this.setState({temperature: e.target.value});
  // ^ this = Calculator component. All React (class) Components have setState
}

Answer 2

Это связано с областями видимости, и это то, что ES6 решает путем реализации функций жирной стрелки.

Обычно, когда вы создаете метод внутри класса в JavaScript, этот метод не наследует мгновенно this, поэтому любая ссылка на this приведет к ошибке. Чтобы решить эту проблему, вам нужно связать функцию с this, которая фактически передает экземпляр класса функции в качестве параметра (если вы смотрите в фоновом режиме).

Если вы хотите избежать этой привязки, вы можете просто использовать жирную стрелку, например, так:

handleChange = e => this.setState({[e.target.name]: e.target.value})

В этом базовом примере c я ссылался на this без привязки метод this и не получил ошибку, потому что функции жирной стрелки автоматически связываются с this