react 事件关系，四种this指定事件

this 指向一共有四种方法

点击事件的四种方法-箭头函数

         <button onClick={this.updateUsertwo}>点击事件的四种方法-箭头函数</button>
updateUsertwo=()=>{
        console.log('点击事件的四种方法-箭头函数',this)
    }

点击事件的四种方法-函数内容写方法

            <button onClick={()=>this.updateUsertwop()}>点击事件的四种方法-函数内容写方法</button>
    updateUsertwop(){
        console.log('u点击事件的四种方法-函数内容写方法',this)
    }

击事件的四种方法-方法内绑定bind-this

<button onClick={()=>this.updateUsertwop()}>点击事件的四种方法-函数内容写方法</button>
    updateUsertwoa(){
        console.log('点击事件的四种方法-方法内绑定bind-this',this)
    }

点击事件的四种方法-箭头函数--初始化bind绑定this<

constructor(props){
    //初始化状态 bind this
    this.updateUsertwos=this.updateUsertwos.bind(this);
}
<button onClick={this.updateUsertwos}>点击事件的四种方法-箭头函数--初始化bind绑定this</button>
    updateUsertwos(){
        console.log('点击事件的四种方法-箭头函数--初始化bind绑定this',this)
    }

<div id="example"></div>

    render(){
        console.log('组件的加载和数据的更新------render')
        return <div>
            <h1>hello ,{this.state.name}</h1>
            <p>年龄,{this.state.age}</p>
            <p>擅长,{this.state.npg}</p>
            <br/>
            <button onClick={this.updateUser}>更新事件</button>
            <br/>
            <button onClick={this.updateUsertwo}>点击事件的四种方法-箭头函数</button>
            <br/>
            <button onClick={()=>this.updateUsertwop()}>点击事件的四种方法-函数内容写方法</button>
            <br/>
            <button onClick={this.updateUsertwoa.bind(this)}>点击事件的四种方法-方法内绑定bind-this</button>
            <br/>
            <button onClick={this.updateUsertwos}>点击事件的四种方法-箭头函数--初始化bind绑定this</button>
        </div>
    }


    //箭头函数
    updateUsertwo=()=>{
        console.log('点击事件的四种方法-箭头函数',this)
    }

    updateUsertwop(){
        console.log('u点击事件的四种方法-函数内容写方法',this)
    }

    updateUsertwoa(){
        console.log('点击事件的四种方法-方法内绑定bind-this',this)
    }

    updateUsertwos(){
        console.log('点击事件的四种方法-箭头函数--初始化bind绑定this',this)
    }


ReactDOM.render(
    <Hello></Hello>,
    document.getElementById('example')
    )

image.png