react组件内点击事件的this的4种指向方法

爱敲码的老余

于 2022-11-08 10:20:10 发布

阅读量715

点赞数 4

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/www61621/article/details/127745592

版权

本文介绍在React中如何解决点击事件中的this指向问题，包括构造函数内使用bind、箭头函数直接绑定、事件传参等技巧，并展示了如何通过事件对象获取目标元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过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)
}