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

目录

  • 方法一. 通过bind改变点击事件内的this指向外部组件内this
  • 方法二 . 通过在构造函数constructor内使用bind对函数内的this重定向
  • 方法三. 通过箭头函数在事件内改变this指向
  • 方法四. 通过使用箭头函数来指向外部组件内this (使用较多)
  • 扩展:
  • 1.react组件内点击事件传参
  • 2.Event事件,获取元素本身
  • 总结

方法一. 通过bind改变点击事件内的this指向外部组件内this

onClick={this.handleClick1.bind( this )}

方法二 . 通过在构造函数constructor内使用bind对函数内的this重定向

constructor() {
	super()
	// 改变点击事件this指向
	this.btnClick = this.btnClick.bind(this)
}
btnClick(){}

方法三. 通过箭头函数在事件内改变this指向


btnClick(){}

方法四. 通过使用箭头函数来指向外部组件内this (使用较多)


btnClickTwo =()=>{
	console.log( this )
}

扩展:

1.react组件内点击事件传参

方案一:之前的bind绑定this
onClick={this.handleClick1.bind( this,1,2 )}
handleClick1(e,n){
  console.log(e,n)
}
方案二:ES6箭头函数绑定this

你可能感兴趣的:(react,react.js,javascript,前端)