在使用ES6

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

因为您使用的是this 箭头功能。，

  

箭头功能没有自己的这个值。这个的价值   在箭头函数内部始终从封闭范围继承。

Arrow functions

如果不是arrow functions，您应该将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} />; } } 设置为自己运行

{{1}}