react事件方法

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

 run(){

            alert(this.state.name)
      }
      <button onClick={this.run.bind(this)}>按钮</button>

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

  this.run = this.run.bind(this);


     run(){

            alert(this.state.name)
      }
     <button onClick={this.run>按钮</button>

第三种方法：

     run=()=> {
            alert(this.state.name)
      }

    <button onClick={this.run>按钮</button>

demo:

import React from 'react';

import '../assets/css/index.css';


class Home extends React.Component{

    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

    constructor(props){
        super(props);   //固定写法

        this.state={

            msg:'我是一个home组件',

            message:'我是一个message',

            username:'name'
           
        }   

        //第二种改变this指向的方法

        this.getMessage= this.getMessage.bind(this);

    }

    run(){
        alert('我是一个run方法')
        
    }

    getData(){

        alert(this.state.msg);
    }


    getMessage(){

        alert(this.state.message);
    }

    getName=()=>{

        alert(this.state.username);
    }



    //第三种改变this指向的方法
    setData=()=>{

        //改变state的值

        this.setState({

            msg:"我是一个home组件 这是改变后的值"
        })

    }

    setName=(str)=>{

        //改变state的值

        this.setState({

            username:str
        })

    }

    render(){
        return(
            <div>
                <h2>{this.state.msg}</h2>    
                 <h2>{this.state.username}</h2>     
                <button onClick={this.run}>执行方法</button>
                <br />
                <br />

                <button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button>

                <br />
                <br />
                 <button onClick={this.getMessage}>获取数据--第二种改变this指向的方法</button>
                <br />
                <br />
                 <button onClick={this.getName}>获取数据--第三种改变this指向的方法</button>
                 <br />
                <br />

                 <button onClick={this.setData}>改变state里面的值</button>

               <br />
                <br />

                 <button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>
               {/* <button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button> */}             
            </div>
        )

    }    
}
export default Home;