React中事件的写法有哪些
本篇内容主要讲解"React中事件的写法有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"React中事件的写法有哪些"吧!
1、普通匿名函数的直接绑定
给onClick后面直接绑定函数，点击以后，就会执行函数里面的内容。
2、使用箭头函数代替匿名的绑定
alert("点击触发匿名函数");
}}>按钮2
3、箭头函数中获取事件源(等同于原生的event对象)
e.target.style.color="red";
}}>点击以后按钮就会变成红色
e就是默认的事件参数 e中的target表示事件发生的目标元素 点击以后按钮就会变成红色
4、将匿名函数分离封装
this.show}>点击调用外面的函数
点击按钮以后 触发外面声明的show方法 show方法定义如下
constructor(props){
super(props);
this.state={
num:10
}
}
show(){
alert("按钮4被点击 但是里面this会脱离上下文关系");
alert(this.state.num);//报错 this是undefined }
可以弹框提示 ， 但是会有this指向的问题 ， 接下来 我们看第五步的加强
5、利用箭头函数 对this指向进行加强 改写的代码如下
this.show//参数问题就看第六点}>调用函数
点击以后num就能得到改变
6、再来研究箭头函数中参数的问题 如果调用的时候带走参数
()=>{
this.show6("我是参数")
}
}>调用带有参数的函数
方法定义的如下 show6为一个箭头函数， content就是形参 ，接受的值为我是参数
show6=(content)=>{
alert(content);
}
7、事件函数触发是带参数和事件源
(e)=>{
this.show7("7777",e);
}
}>带走参数和事件源
show7中第二个参数e需要特别处理， 在(e)中声明 才能带出去， 不然e会是没有定义。
方法的定义部分
show7=(content,e)=>{
e.target[xss_clean]= content;
}
content就是参数"7777" ，e就是事件源， 通过事件源可以找到目标元素， 然后更新里面的内容
8、不使用箭头函数 使用bind加强(bind里面的第一个参数 表示bind前面函数声明里面this的指向)
方法定义的地方
show8(){
alert("bind绑定");
}
9、改写bind 贴近官方推荐写法
在show9定义中
constructor(props){
super(props);
this.state={
num:10
}
this.show9 = this.show9.bind(this);//bind的提升 调用的写法和8就不一样了 }
show9(){
alert(this.state.num);
}
到此，相信大家对"React中事件的写法有哪些"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
