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

一、绑定事件处理函数this的几种方法

1.1 第一种方法：在onClick事件中直接使用bind(this)

//定义函数
run(){
  alert(this.state.name)
}

//调用函数
<button onClick={this.run.bind(this)}>按钮</button>

1.2 第二种方法：构造函数中改变

//在构造函数中改变this指向
this.run = this.run.bind(this);

//定义函数
run(){
   alert(this.state.name)
}

//调用函数
<button onClick={this.run>按钮</button>

1.3 第三种方法：使用箭头函数

//定义箭头函数
run=()  => {
   alert(this.state.name)
}

//调用函数
<button onClick={this.run>按钮</button>

二、改变属性值

改变属性值时，this的改变与绑定时一致，最常用的是箭头函数

this.setState({
        name:'李四',
        age:'35',
        address:'青岛市李沧区书院路123号'
    }
)

定义箭头函数如下：

//改变属性值
setMsg=() =>{
    this.setState({
            name:'李四',
            age:'35',
            address:'青岛市李沧区书院路123号'
        }
    )
}

调用箭头函数如下：

<button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>

三、完整DEMO示例

import React   from  'react';
import 'bootstrap/dist/css/bootstrap.min.css';
//定义组件
class MethodClick extends React.Component{
    constructor(props){
        super(props);

        //定义数据
        this.state={
            name:'张三',
            age:'23',
            address:'山东省青岛市市南区宁夏路288号软件园2号楼'
        }

        //第二种方式：在构造函数中改变this
        this.getAge=this.getAge.bind(this);
    }

    //第一种方式：onClick={this.getName.bind(this)
     getName(){
        alert(this.state.name);
    }

    //第二种方式：在构造函数中改变this
    getAge(){
        alert(this.state.age);
    }

    //第三种方式：使用箭头函数，使用频率最高
    getAddress=() =>{
        alert(this.state.address);
    }

    //改变属性值
    setMsg=() =>{
        this.setState({
                name:'李四',
                age:'35',
                address:'青岛市李沧区书院路123号'
            }
        )
    }

    render() {
        return (
            <div>
                <ul className="list-group">
                    <li className="list-group-item list-group-item-primary">姓名：{this.state.name}</li>
                    <li className="list-group-item list-group-item-success">姓龄：{this.state.age}</li>
                    <li className="list-group-item list-group-item-info">地址：{this.state.address}</li>
                </ul>
                <br/>
                <br/>
                <button type="button" className="btn btn-primary" onClick={this.getName.bind(this)}>获取当前姓名</button>
                <br/>
                <br/>
                <button type="button" className="btn btn-success" onClick={this.getAge}>获取当前年龄</button>
                <br/>
                <br/>
                <button type="button" className="btn btn-info" onClick={this.getAddress}>获取当前地址</button>
                <br/>
                <br/>
                <button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>
            </div>
        )
    }

}

export  default  MethodClick;//导出组件