用 ES6 在 React 组件中定义方法的语法是什么

Question

如您所知，我们可以在 React 0.13 中使用 ES6。我发现下面的语法来定义一个事件处理程序：

class MyComponent extends React.Component {
  handleClickEvent = evt => {
    this.setState({value: evt.target.value});
  }
  render() {
    return <div onClick={this.handleClickEvent} />;
  }
}

通过这种语法，我们不需要使用this.handleClickEvent.bind(this)。我进行了很多搜索，但仍然没有找到为什么 this 方法中的 handleClickEvent 在正确的范围内。任何人都可以帮忙吗？提前致谢！

Answer 1

因为你使用的是=>箭头函数。，

箭头函数没有自己的 this 值。这个的价值 箭头函数内部总是继承自封闭范围。

Arrow functions

如果不是arrow functions，您应该将this 设置为自己运行

class MyComponent extends React.Component {
  constructor() {
    super();
    this.handleClickEvent = this.handleClickEvent.bind(this);
    //                                           ^^^^^^^^^^^
  }

  handleClickEvent() {
    this.setState({value: evt.target.value});
  }

  render() {
    return <div onClick={this.handleClickEvent} />;
  }
}