React事件绑定四种方案

react事件绑定四个方案

方案一：在事件中通过bind绑定this（显示绑定）用的较少

<button onClick={this.hanldEvent.bind(this)}></button>

方案二：同一绑定this

this.hanldEvent = this.hanldEvent.bind(this)

hanldEvent(){
    console.log(this)
}
<button onClick={this.hanldEvent}></button>

方案三：通过箭头函数绑定this

<button onClick={this.hanldEvent}></button>

hanldEvent=()=>{
        console.log(this);
}

方案四：最常用的方法（推荐）直接传入箭头函数，在箭头函数中调用需要调用的箭头函数。标准写法

<button onClick={e=>{
                    this.hanldlist('why',) //可以传任何的参数
                }}>点我</button>
hanldlist(name,evnet){
        console.log(this.state.message,name,evnet);
    }