第一种:在箭头函数里绑定clickHandler事件方法
在绑定事件方法时,在事件方法的外部包裹一个箭头函数
定义一个ref对象
domRef=React.createRef()
写一个按钮,绑定一个点击事件,然后去获取这个ref对象(此时会遇到this丢失,为undenfind的问题)
<button onClick={
()=>{this.clickHandler()}
}>点击1</button>
然后定义事件方法
clickHandler(){
console.log("点击1")
console.log(this.domRef.current.value);
}
这时候,this.domRef.current.value就可以正常获取到了
注意:这里方法内可以正常传参,默认的接收参数是react封装的事件对象。
例如:onClick={(e)=>{this.clickHandler(1,2,e)}
第二种:将clickHandler写成箭头函数的形式
将被调用的事件方法写成箭头函数
定义一个ref对象
domRef=React.createRef()
写一个按钮,绑定一个点击事件,然后去获取这个ref对象(此时会遇到this丢失,为undenfind的问题)
<button onClick={this.clickHandler}>点击2</button>
然后定义事件方法
clickHandler(){
console.log("点击2");
console.log(this.domRef.current.value);
}
这时候,this.domRef.current.value就可以正常获取到了
注意:这里不能直接传参,传参需要通过自定义属性传参。
例如:data-id=“1”,然后用e.target.dataset.id获取传递的参数。
第三种:用bind改变this指向
用bind改变this指向 返回一个改变this指向后的新函数 再调用这个新函数。
定义一个ref对象
domRef=React.createRef()
写一个按钮,绑定一个点击事件,然后去获取这个ref对象(此时会遇到this丢失,为undenfind的问题)
<button onClick={this.clickHandler.bind(this)}>点击3</button>
然后定义事件方法
clickHandler(){
console.log("点击3");
console.log(this.domRef.current.value);
}
这时候,this.domRef.current.value就可以正常获取到了
注意:在bind方法里可以进行传参,默认的接收参数是react封装的事件对象。
例如:onClick={this.clickHandler.bind(this,11,22,e)}。
第四种:利用constructor构造器结合bind
利用constructor构造器 在构造器里用bind改变this的指向
定义一个ref对象
domRef=React.createRef()
写一个按钮,绑定一个点击事件,然后去获取这个ref对象(此时会遇到this丢失,为undenfind的问题)
<button onClick={this.clickHandler}>点击4</button>
在继承方法里定义constructor构造器,在构造器里用bind()方法改变this的指向,在赋值给clickHandler方法,然后在下面的事件方法中做业务处理
class Class extends Component {
constructor(){
// 继承父类中的方法和属性 必须先引用super才能对this进行修改
super();
// 用bind改变this的指向
this.clickHandler=this.clickHandler.bind(this)
}
clickHandler(){
console.log("点击4");
console.log(this.domRef.current.value);
}
}
注意:这里不能直接传参,传参需要通过自定义属性传参(和第二种一样)。
例如:data-id=“1”,然后用e.target.dataset.id获取传递的参数。