react 绑定事件得方法和改变state得值

首先创建react组件

class Home extends React.Component{

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

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

        this.state={

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

            message:'我是一个message',

            username:'itying'
           
        }   

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

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

    }
    // run方法
    run(){
        alert('我是一个run方法')
        
    }
       // 注意this指向此时方法中的this是指向改函数而不是指向这个组件 所以需要改变this
       // 方法1   <button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button>
       // 也就是在调用时改变
       // 方法2 ：在constructor 中使用bind改变this
       // 方法3 就是es6得箭头函数
    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得指向时指向改函数所以调用方法时需要改变this
        //   <button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>

        this.setState({

            username:str
        })

    }

    render(){
        return(
            <div>
                <h2>{this.state.msg}</h2>    
                 <h2>{this.state.username}</h2>     

             // 在这里执行run方法 需要注意run后无括号如果又括号代表方法得直接执行
                <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;

改变state得值 react要改变状态必须用this.setState()上面第三种改变this指向得箭头函数方法 就是一个改变state值得方法 同时注意this问题请看setName方法得备注！

谢谢大家！