javascript - ES6 方法未在 create-react-app 中定义

Question

我很难理解为什么 create-react-app 无法编译，告诉我 error 'updateWord' is not defined no-undef。我是 React with ES6 的新手。通常我会写一个像 const App = React.createClass({ }); 这样的组件，但我决定尝试一些语法糖来代替。

我有父组件 App 和子组件 Input:

class App extends Component {
  constructor(props) {
    super(props);
    // all other code omitted...
  }

  handleInput(input) {
    console.log(`handle: ${input}`); 
    updateWord(input);
    // this also causes an error
    // this.updateWord(input);
  }

  updateWord(input) {
    console.log(`update ${input}`);
    // why isn't this defined?
  }

  render() {
    return (
      <div className="App">
        <Input onInput={this.handleInput} />
      </div>
      );
  }
}

class Input extends Component {
  handleInput(e) {
    let input = e.target.value;
    this.props.onInput(input);
  }

  render() {
    return (
      <form>
        <input onChange={this.handleInput.bind(this)} />
      </form>
      );
  }
}

我尝试更改为 this.updateWord(input); 而不是 updateWord(input) 但无济于事。我得到:

"App.js:55 Uncaught TypeError: this.updateWord is not a function" 

通常，当我(使用 ES5)实现与我现在正在做的相似的模式时，我不会遇到任何困难。例如:

const App = React.createClass({
  getInitialState: function() {
    // all other code omitted...
  },

  handleInput: function(input) {
    console.log(`handle: ${input}`); 
    this.updateWord(input);
  },

  updateWord: function(input) {
    console.log(`update ${input}`);
    // In theory, this implementation would not cause any errors?
  },

  render: function() {
    return (
      <div className="App">
        <Input onInput={this.handleInput} />
      </div>
      );
  }
}

Answer 1

问题是，当您在 this.handleInput 中执行 this.updateWord(...) 时，this 指的是 输入组件。让我来说明问题:

当您设置 onInput 处理程序时，如下所示:

onInput={this.handleInput}

在这里，由于您的 Input 组件正在调用该函数，因此 this 指的是 Input 组件。这是由于行:

this.props.onInput(input);

Input 组件正在调用 handleInput。这意味着，在您的 handleInput 函数中，this 上下文是 Input。考虑以下行:

this.updateWord(input);

在 handleInput 函数中。这里你调用了 this.updateWord，但是由于 this 是 Input，它会尝试从 调用 updateWord输入不存在的，从而抛出错误。

---

解决方案是显式绑定(bind) this 上下文 作为类(App 组件) 而不是 Input 组件，使用 Function.prototype.bind或 arrow function .来自文档:

The bind() method creates a new function that, when called, has its this keyword set to the provided value

你可以像这样应用它:

onInput={this.handleInput.bind(this)}

或者更优选地在构造函数中:

this.handleInput = this.handleInput.bind(this);

如果选择第二个选项，您可以执行以下操作:

onInput={this.handleInput}

(这更可取，因为 render 方法中的绑定(bind)将在每次渲染时创建一个新函数，这不是首选)。

上面一行中的 this 上下文是类。由于您绑定(bind)了 this，class 将在函数中正确用作 this 上下文并执行 this.updateWord将调用类 中的方法。

一种更好的方法是使用箭头函数而不是常规的 ES6 方法。来自文档:

An arrow function expression has a shorter syntax compared to function expressions and does not bind its own this, arguments, super, or new.target.

我们可以通过将 handleInput 分配给箭头函数而不是常规方法来应用它:

handleInput = (input) => {
    console.log(`handle: ${input}`); 
    this.updateWord(input);
}

这将完全消除 bind 的使用，而是使用箭头函数。由于箭头函数不绑定(bind)它们自己的 this，这意味着 this 引用封闭的上下文。在上面的示例中，没有使用方法，因此 this 指的是类(封闭的上下文)。这将正确调用类方法 updateWord，因此，如果您采用这种方式，则无需更改 onInput 事件处理程序。