React：引入class关键字后this的绑定问题

使用React.createClass会自动绑定每个方法的this到当前组件，但使用ES6 class关键字时，这种自动绑定功能就没有，需要手动绑定this。不然的话，经常出现this是undefined的现象。
比如下面的test2中的this指向就不正确了。

import React from 'react';

export default class App extends React.Component{

    constructor(props){
        super(props);
    }

    render(){

        this.test1();

        return (
            <div onClick={ this.test2 }>abc</div>
        )
    }

    test1(){
        console.log(this); // App
    }

    test2(){
        console.log(this); // null
    }
}

解决方案一：采用箭头函数
箭头函数将this和函数定义时的上下文绑定，能达到期望的效果。

render() {

    this.test1();   // 这里不存在歧义，可以直接用

    return (
        <div onClick={ () => this.test2() }>abc</div>   // 这里用箭头函数，让this和定义时的上下文绑定，这里是App
    )
}

解决方案二：在回调响应的地方手动绑定

render() {

    this.test1();   // 这里不存在歧义，可以直接用

    return (
        <div onClick={ this.test2.bind(this) }>abc</div>   // 手动绑定；绑定当前组件App，而不是执行时的<div>标签
    )
}

解决方案三：构造函数中手动绑定

constructor(props) {
    super(props);
    
    this.test2 = this.test2.bind(this); // 将this和当前组件绑定
}

React.createClass估计采用的就是这种方案，构造函数将所有的function成员都自动绑定一下。

选择的方案

• 大多数时候可以选择方案一，用箭头函数，比较简洁；
• 如果箭头函数不起左右，可以选择bind的方式；

参考文章

React绑定this的三种方式

理解React中es6方法创建组件的this

React中使用ES6 class的this指向？