Использование функций стрелок внутри компонента React не переносится через родительский контекст (который существует).это остается неопределенным в функции стрелки - PullRequest
Новая
       12

Использование функций стрелок внутри компонента React не переносится через родительский контекст (который существует).это остается неопределенным в функции стрелки

0 голосов
/ 12 мая 2019

this определено в методе render, но не в eventHandler, который вызывает функцию стрелки.

Я выполнил новую проверку на чистоту npx create-react-app projectName и воспроизвожу неожиданную проблему I 'Я сталкиваюсь в личном проекте. 

import React from 'react';

class RemoteSubmitButton extends React.Component {
  onSignUpClick = () => {
    debugger; // "this" is undefined
  };

  render() {
    debugger; // "this" is defined
    return (
      <button
        type="button"
        onClick={this.onSignUpClick}
      >
        Submit
      </button>
    );
  }
}

export default RemoteSubmitButton;

Всякий раз, когда я ссылаюсь на this внутри функции стрелки, я ожидаю, что контекст вызывающего метода (метод render) будет перенесен.Поместив несколько отладчиков, я вижу, что this определен в методе рендеринга, но не в методе onSignUpClick.

1 Ответ

1 голос
/ 12 мая 2019

Использование жирных стрелочных функций переносит код таким образом, что не существует гарантированного способа узнать, какая переменная инкапсулирует контекст области. Обходное решение, которое работает, использует ручное связывание в свойствах класса: 

import React from 'react';

class RemoteSubmitButton extends React.Component {
  constructor(props) {
    super(props)
    this.onSignUpClick = this.onSignUpClick.bind(this)
  }

  onSignUpClick() {
    debugger; // "this" is defined
  };

  render() {
    debugger; // "this" is defined
    return (
      <button
        type="button"
        onClick={this.onSignUpClick}
      >
        Submit
      </button>
    );
  }
}

export default RemoteSubmitButton;
...