通过bind改变点击事件内的this指向外部组件内this
onClick={this.handleClick1.bind( this )}
通过在构造函数constructor内使用bind对函数内的this重定向
constructor() { super() // 改变点击事件this指向 this.btnClick = this.btnClick.bind(this) } btnClick(){}
通过箭头函数在事件内改变this指向
<button onClick={this.btnClick.bind(this)}></button> btnClick(){}
通过使用箭头函数来指向外部组件内this (使用较多)
<button onClick={this.btnClickTwo}></button> btnClickTwo =()=>{ console.log( this ) }
react组件内点击事件传参
方案一:之前的bind绑定this onClick={this.handleClick1.bind( this,1,2 )} handleClick1(e,n){ console.log(e,n) } 方案二:ES6箭头函数绑定this onClick={()=>this.handleClick1(12,4)} handleClick1(e,n){ console.log(e,n') }
Event事件,获取元素本身
<button onClick={(e)=>this.getBtn(e)}></button> getBtn(e){ console.log(e.target) }
总结:
以上就是 React 组件内点击事件this的4种指向方法,不懂得也可以在评论区里问我,以后会持续发布一些新的功能,敬请关注。