因为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.可以获取事件触发时产生的事件对象;