React点击事件获取组件值的三种方式

import React from "react";

class New extends React.Component{

//获取组件值的三种方式
constructor(props){
    super(props);
    this.state={
        username:"kaka1994",
        age:18
    }
    this.getMessage=this.getMessage.bind(this);  //程序一初始化就改变this指向
}

run(){
    alert("这是run方法");
}

// 第一种方式---在点击事件中增加bind方法 
getData(){
    alert(this.state.username);
}
// 第二种方式---在构造函数中bind方法
getMessage(){
    alert(this.state.username);
}
// 第三种方式---箭头函数
getName=()=>{
    alert(this.state.username);
}

render(){
    return(
        <div>
        这是New组件
        <br />
        <br />
        <br />
        <button onClick={this.run}>run方法</button>
        <br />
        <br />
        <br />
        {/* 第一种获取方式，在点击事件中增加bind方法 */}
        <button onClick={this.getData.bind(this)}>第一种方式</button>    
        <br />
        <br />
        <br />
        {/* 第二种获取方式，在构造函数中bind方法 */}
        <button onClick={this.getMessage}>第二种方式</button>
        <br />
        <br />
        <br />
         {/* 第三种获取方式， 箭头函数 */}
        <button onClick={this.getName}>第三种方式</button>

        </div>
    )
}



}
export default New;

结果 获取成功。