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

正如您所知，从0.13开始，我们可以在React中使用ES6。我找到了以下语法来定义事件处理程序：

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

类MyComponent扩展了React.Component{ handleClickEvent=evt=>{ this.setState（{value:evt.target.value}）； } render（）{ 返回； } }

---

通过这种语法，我们不需要使用

this.handleClickEvent.bind（this）

。我搜索了很多，但仍然没有找到方法

handleClickEvent

中的

这个

为什么在正确的范围内。有人能帮忙吗？提前谢谢

因为您正在使用

=>

箭头函数

箭头函数没有自己的此值。它的价值是什么 在arrow函数中，函数始终从封闭范围继承

使用not时，您应该将

设置为独立运行

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

类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
this.handleClickEvent=this.handleClickEvent.bind（this）；
//                                           ^^^^^^^^^^^
}
handleClickEvent（）{
this.setState（{value:evt.target.value}）；
}
render（）{
返回；
}
}

谢谢@Alexander，这很有道理。因此，arrow函数没有自己的

this

。即使使用bind（someObj），它也不会将该对象用作

此

值。这不是ES6，而是一个实验性的ES7草案。