好程序员web前端com.cn/tag/%e5%9f%b9%e8%ae%ad" target="_blank">培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的:
1、react事件采用驼峰命名法,而不是纯小写。
驼峰命名法(camelCase):命名的全部全称, 首个单词全部小写后面每个单词的首字母大写。
eg: getElementById onClick
2、使用JSX语法的时候需要传入一个函数作为事件处理函数, 而不是一个字符串
了解基本的以后 , 下面我们利用九个例子来进行事件的巩固:
1、普通匿名函数的直接绑定
给onClick后面直接绑定函数,点击以后,就会执行函数里面的内容。
2、使用箭头函数代替匿名的绑定
alert("点击触发匿名函数");
}}>按钮2
3、箭头函数中获取事件源(等同于原生的event对象)
e.target.style.color="red";
}}>点击以后按钮就会变成红色
e就是默认的事件参数 e中的target表示事件发生的目标元素 点击以后按钮就会变成红色
4、将匿名函数分离封装
this.show}>点击调用外面的函数</button>
点击按钮以后 触发外面声明的show方法 show方法定义如下
constructor(props){
super(props);
this.state={
num:10
}
}
show(){
alert("按钮4被点击 但是里面this会脱离上下文关系");
alert(this.state.num);//报错 this是undefined }
可以弹框提示 , 但是会有this指向的问题 , 接下来 我们看第五步的加强
5、利用箭头函数 对this指向进行加强 改写的代码如下
发表评论