Зачем нам нужно связывать обработчик событий в реакции - PullRequest
Новая
       50

Зачем нам нужно связывать обработчик событий в реакции

0 голосов
/ 23 апреля 2020

Я понимаю, что вы можете подумать, что это избыточный вопрос, но выслушайте меня.

Я работаю с компонентами класса React и только что узнал, что нам нужно связать функцию обработчика событий в конструкторе компонента. для доступа к this.setState() внутри обработчика событий. Теперь из того, что я понимаю о JavaScript классах, к this можно получить доступ любым методом внутри класса.

Чтобы продемонстрировать, что я говорю, вот код: 

class Parent {
  setState() {
    console.log("Set State is called");
  }
}

class Child extends Parent {
  eventHandler() {
    this.setState();
  }

  render() {
    console.log("Render method called");
    console.log("assume an event happened and event handler is called");
    this.eventHandler();
  }
}

new Child().render()

Вывод вышеприведенного кода: 

Render method called
assume an event happened and event handler is called
Set State is called

В отличие от кода выше, как работает реагирует (т. Е. Предполагается, что setState является методом, определенным в классе React.Component), почему реакция выдает ошибку когда this.setState() вызывается внутри обработчика событий?

1 Ответ

0 голосов
/ 23 апреля 2020

Ключевым моментом, который я упустил, было то, что метод, определенный внутри класса, теряет свой контекст при переназначении.

Поэтому, когда мы это делаем, 

<SomeComponent onClick={eventHandler} />

the eventHandler переназначается какой-то другой переменной и вызывается внутренне по реакции. Из-за этого переназначения eventHandler потеряет свой контекст, и при вызове с помощью внутренней реакции у него не будет this.

Чтобы явно связать this с eventHandler, чтобы он не теряя свой контекст даже после переназначения, мы делаем: 

this.eventHandler = this.eventHandler.bind(this)

Пожалуйста, обратитесь к этой статье для более подробного объяснения.

...