解决react中事件绑定this指向丢失的问题

第一种：在箭头函数里绑定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获取传递的参数。