react 用es6写后this指向报错

Question

我用es6改写react的组件，可是之后，组件的this指向居然变成了undefined><，请大家帮忙看看，，谢谢

Answer 1

onChange的回调是在浏览器全局对象执行的，此时的this并不指向你定义的React组件部分。有两种方法：

• 使用function.prototype.bind()更改函数内部的this

• 使用es6的箭头函数，es6中的箭头函数this默认指向上一层级环境

Answer 2

constructor(){
    this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
}

原因你懂吧

Answer 3

绑定事件时使用：

onChange={this.handleAuthorChange.bind(this)}

绑定事件时传递的只是一个函数，并没有 this 的指向，所以需要传递一个明确绑定好 this 的函数给 onXXX 进行处理。

Answer 4

之前React.createClass中事件是默认绑定到当前类中，但是使用es6语法的话，需要手动绑定。

handleAuthorChange = ()=>{
  // do something
}

第二种方式就是通过以上说的。推荐第一种 ，毕竟少

 constructor(){
      this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
 }

Answer 5

handleAuthorChange = ()=>{
  // do something
}

这种方法会报错
原因见React js 箭头函数报错
所以推荐还是手动绑定一下吧