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

Question

正如你所知，从 0.13 开始我们就可以在 React 中使用 ES6。我发现下面的语法来定义事件处理程序:

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

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

Answer 1

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

Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.

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} />;
  }
}