React改变事件处理函数内部this指向的三种方法

简介：

在以类继承的方式定义的组件中，为了能方便的调用当前组件的其他成员的属性或方法，如 this.state，通常需要将事件处理函数运行时的this指向当前组件实例。

如下面代码所示，在button组件中调用事件处理函数getmessage，而在getMessage内部调用了this.state，但是当前写法下，函数内部的this并不指向当前实例，所以会报找不到state的错误。

import React from 'react';

class Home extends React.Component {

    constructor(props){
        super(props);

        this.state={
            message:'this is the message'
        }
    }

    getMessage(){
        alert(this.state.message);//此处会报错，因为this不指向当前实例
    }

    render(){

        return(
            <div>
                <button onClick={this.getMessage}>show message</button>
            </div>
        )
    }
}

export default Home

方法一：在button上调用函数时绑定

 <div>
     <butt