目录
方法一. 通过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 )
}
扩展:
1.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')
}
2.Event事件,获取元素本身
<button onClick={(e)=>this.getBtn(e)}></button>
getBtn(e){
console.log(e.target)
}
总结
以上是本节的内容,希望能帮到你,以后会持续更新更多内容,想了解更多点我主页,谢谢观看!