Может ли кто-нибудь на самом деле объяснить ТОЧНО, ЧТО делает обработчик событий React с моим «этим»? Интересный эксперимент - PullRequest
Новая
       40

Может ли кто-нибудь на самом деле объяснить ТОЧНО, ЧТО делает обработчик событий React с моим «этим»? Интересный эксперимент

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

Я провел несколько забавных экспериментов с перемонтированием нормального потока React this / prototypal, и я зашел в тупик, так что мне интересно, сможет ли кто-нибудь помочь. Ниже приведен простейший код, который я мог бы сделать для точного определения вопроса.

Объяснение: Я прикрепил переменную и метод к объекту-прототипу приложения и успешно использовал «this», чтобы указать на то, что не объект this (автоматически возвращается конструктором суперкласса). Когда запускается componentDidMount, this в myMethod2 указывает на App.prototype и печатает App.Prototype.myVar, как и ожидалось. Но когда я втыкаю этот же метод в обработчик событий и нажимаю кнопку, он говорит мне, что есть ошибка типа и что «this» не определено. Я знаю все различные способы связывания, и связывание было бы обычным решением, если бы я хотел, чтобы «this» в моем методе обработчика событий указывало на объект «this», но ...

Вопрос: может кто-нибудь разобраться, почему обработчик событий заставляет 'this' внутри myMethod2 не указывать на App.prototype, хотя (насколько я вижу) myMethod2 вызывается для App.prototype.

Спасибо! 


import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    App.prototype.myVar2 = 123
    this.myVar2 = 456;
  };

  myMethod2() {
    console.log(this.myVar2)
  };

  componentDidMount() {
    App.prototype.myMethod2(); // prints 123 as expected
  }

  render() {
    return (
      <div>
        <button onClick={App.prototype.myMethod2}>click me</button> {/* Type Error */}
      </div>
    );
  };

};

export default App
...