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 需要通过ref API来获取
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 ,使用全部小写会报错

2. 绑定的函数不能加() ,因为加()表示调用,那么绑定就是这个函数的结果了 ,传入的是函数 不是字符串 不需要加""
3. 默认有一个参数,这个参数是 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)

---

参考资料

事件基础 -this
事件传参

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有问题,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉