0. 前言
1.之前写过2篇简单的事件相关文章事件基础 -this
2.事件传参
3.这篇文章来详细的说下
react中的事件
1.重点 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(╯□╰)o2.这个思想也类似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)
