在使用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).我搜索了很多,但仍然没有找到为什么this方法handleClickEvent在正确的范围内.有人可以帮忙吗？提前致谢!

Answer 1

因为你正在使用 => 箭头功能.,

箭头函数没有自己的此值.箭头函数内的值始终从封闭范围继承.

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