React事件及绑定方式

因为React里我们操作的都是虚拟DOM，所有在JSX语法结构里绑定的事件并不是真正的DOM事件，我们称之为"React控制事件"；

语法：

on+事件名 (事件名首字母大写，且使用驼峰命名法)

例如:onClick，onMouseover

绑定事件方式一(不推荐使用)：

特点：

1.调用的方法中不能访问this，因为this未被绑定(undefined)；

2.不能传参；

3.可以获取事件触发时产生的事件对象；

事件绑定的方式二(常用)：

使用bind方法绑定，第一个参数是绑定的实例对象this(组件实例对象)，从参数2以后，是事件触发时，传递的参数(实参)；

on+事件名={this.方法名.bind(this)}

有参数时

特点：

1.调用的方法中能够获取this对象(组件实例对象)；

2.能够直接传参；

3.可以获取事件触发时产生的事件对象；

事件绑定的方式三：

使用箭头函数

on+事件名={()=>{ this.方法名(参数1，参数2)} }

有参数时

特点：

1.调用的方法中能够获取this对象(组件实例对象)；

2.能够直接传参；

3.不可以直接获取事件触发时产生的事件对象；

事件绑定的方式四：

在constructor方法中，修改this的指向

this.方法名 = this.方法名.bind(this)；

 

特点：

1.调用的方法中能够获取this对象(组件实例对象)；

2.不能直接传参；

3.可以获取事件触发时产生的事件对象；