react绑定数据和修改数据

import React,{Component} from 'react';

class Hello extends Component{

    constructor(props){

      super(props);

      //react可以在这里定义数据

    this.state={

        msg:"我是一个hello组件",

        message:"我是message",

        username:"ligengxian"

    }

 

     //第二种改变this指向的方法，先在开始运行的时候就给他初始化

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

 

          

    }

    //这里可以定义一些方法，跟render平级

    run(){

        alert("我是一个run方法")

    }

    getData(){

        //用了这个this.getData.bind(this)就可以这样子写

        alert(this.state.msg)

 

    }

    getMessage(){

        alert(this.state.message)

    }

//获取state里面的值的三种方法，这个是第三种，用的最多的一种方法

//改变this指向的方法

     getName=()=>{

        alert(this.state.username)

     }

 

//------------------------------------

//改变state里面的值

   setData=()=>{

   //改变state的值

   this.setState({

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

 

   })

   }

   setMessage=(str)=>{

    //改变state的值

    this.setState({

        username:str

 

    })

    }

    render(){

        return (

        <div>

          <h2>{this.state.msg}</h2>

          <br/>

          <h2>{this.state.username}</h2>

          <button onClick={this.run}>执行方法</button>

          <br/>

          

          //获取数据的方法

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

          //第二种获取数据的方法

          <button onClick={this.getMessage}>获取数据第二种执行方法，改变this指向的方法</button>

 

          //第三种获取数据的方法

          <button onClick={this.getName}>获取数据第三种执行方法，改变this指向的方法</button>

          <br/>

          <button onClick={this.setData}>改变State的值</button>

          <br/>

          <button onClick={this.setMessage.bind(this,"张三")}>执行方法传值</button>

          //传入多个参数

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

        </div>

     

        )

    }

}

export default Hello;