1. 前言
1.之前写过2篇简单的事件相关文章事件基础 -this
2.事件传参
3.这篇文章来详细的说下react中的事件
重点 this 箭头函数
因为这个React事件 this经常容易出错,所以注意
创建者: 自己写事件函数的时候 用箭头函数
clickHandler = (){}
调用者: 自己调用事件函数的时候用箭头函数
<button onClick={()=>{
this.clickHandler()
}}> 点我呀 </button>
2. 是什么 what
React中的事件 叫合成事件
1.因为react底层使用了
事件委托的形式对真实DOM事件进行了封装,使合成事件具有更好的浏览器兼容性和性能
3. 原理
1.首先明确react的事件肯定还是基于
原生JS的事件,所以一个事件的3个阶段也会有 1.事件捕获阶段 2.目标阶段 3.事件冒泡阶段,这里只简单说下,具体的不在讲解
2.react中事件在具体的DOM节点上被触发后,最终都会冒泡到document上,再由document上绑定的统一事件处理程序将事件分发到具体的组件实例
4. why 为啥react要重新搞一个 合成事件呢
1.其实还是原生JS的问题
兼容性和性能对说你呢IEo(╯□╰)o
2.这个思想也类似jQ,抹平不同浏览器的差异,作为开发者,不关心浏览器差异,只专注于开发就行
3.开发者使用的是暴露出来的 统一的,稳定的,而且与原生事件相同的事件接口
4.获取真实的DOM 需要通过refAPI来获取
5.获取原生的事件对象 可以通过e.nativeEvent
console.log("原生",e.nativeEvent);
5. 事件语法-基础
function test(e) {
console.log("1-1-1-1",e)
}
ReactDOM.render((
<div>
<div onClick={test}> 事件</div>
</div>
), app)
注意
1.
React事件绑定属性的命名采用驼峰式写法，而不是小写事件名采用 驼峰
onClick,使用全部小写会报错
- 绑定的函数不能加
(),因为加()表示调用,那么绑定就是这个函数的结果了 ,传入的是函数 不是字符串 不需要加""- 默认有一个参数,这个参数是
react的合成参数,可以自己打印查看
6. 函数传参
function test2(id, e) {
console.log("2-2-2-2", id)
console.log("事件:", e)
console.log("事件target:", e.target)
}
var shopId = "1234567"
ReactDOM.render((
<div>
<div onClick={(event) => {
event.persist()
test2(shopId , event)
}}
id="test"
> 事件传参</div>
</div>
), app)
1.必须通过箭头函数周转下 才能传参
2.参数顺序可以调换
3.persist持久化 因为合成事件 是react封装的,点击完就释放掉了 ,不保存信息,所以打印事件对象的时候属性值都是空的null,加了persist就会保存下来信息
7. dataset-传值
1.dataset 也是目前很常用的传参手段
2.dataset写标签属性的时候 注意不要使用 驼峰
function test2(num, e) {
console.log("2-2-2-2", num)
console.log("事件:", e)
console.log("事件-target:", e.target.dataset.shopid)
}
var shopId = "1234567"
ReactDOM.render((
<div>
<div onClick={test}> 事件</div>
<div onClick={(event) => {
test2(100, event)
}}
id="test"
data-shopid={shopId}> 事件传参</div>
</div>
), app)
