Question

this是在render方法中定义的，但未在调用箭头函数的eventHandler中定义。

我重新整理了npx create-react-app projectName的清单，并重现了我在个人项目中遇到的意外问题。

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是在render方法中定义的，而不是在onSignUpClick方法中定义的。

Answer 1

使用粗箭头功能以一种无法保证知道哪种变量封装范围内上下文的方式来转换代码。一种可行的解决方法是在类属性中使用手动绑定：

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;

在React组件内部使用箭头函数不会在父上下文（存在）上进行转移。这在箭头功能中仍然未定义

1 个答案: