React开发获取不到当前触发事件的元素

williamwen1986 发布于2019-08-19 18:27 / 1528人阅读

摘要：到这里就要另外办法了，看下面的代码拿到当前触发事件的元素跑一遍，还是不行。。。去查了一下对象属性方法返回其事件监听器触发该事件的元素。返回触发此事件的元素事件的目标节点。事件绑定的元素。

应用场景：一组列表，需获取当前触发 onClick 事件元素上的 data-key ；

就一个事件冒泡导致的问题；
初步没解决方案是给 li 下的所有子元素都加上 data-key
显然这是很很很笨的方法，仅为当时测试用。

实在不行，其他地方也要解决这个问题
就停下脚步

得深挖下，事件捕捉/冒泡的过程（有空补全）

既然是子元素冒泡上来了，就得去子元素下阻止冒泡
想了5秒，子元素下要有100个元素且不是。。。。。

到这里就要另外办法了，看下面的代码：

handleMsglistStar(e){
    console.log(e.currentTarget);  //拿到当前触发 onClick事件的元素      
    e.stopPropagation();
    e.preventDefault();
}

跑一遍，还是不行。。。
去查了一下 JavaScript event对象属性方法

currentTarget 返回其事件监听器触发该事件的元素。

target 返回触发此事件的元素（事件的目标节点）。

target 触发事件的元素。尽管事件是绑定在 li 上的，点 div.item-content 触发的就是 div.item-content。

currentTarget 事件绑定的元素。事件绑定在 li 不管你点谁触发的总是 li

解决无法获取到当前触发事件的元素

handleMsglistStar(e){
    console.log(e.currentTarget)
    console.log(e.currentTarget.getAttribute("data-key"))
    //这样就能拿到绑定在 li 上的信息了
}

{this.props.textList.map(item => (
    
        
            
            
        
    
))}

结语：反正我目前找到的最好的解决方法，匆匆忙忙下班时间搞个文章记录；不太全面，有些东西一笔过，遇到过这个问题的，一看就能明白，如有不正之处，欢迎指正。

GPU云服务器云服务器获取当前的时间事件触发事件触发器 java事件触发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79622.html

vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
5、React组件事件详解

摘要：组件事件响应在构建虚拟的同时，还构建了自己的事件系统且所有事件对象和规范保持一致。的事件系统和浏览器事件系统相比，主要增加了两个特性事件代理和事件自动绑定。 React组件事件响应 React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。 React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。 1、事件代理 ...

Ververica 2019-08-22 15:13 评论0 收藏0
Vue面试中，经常会被问到的面试题/Vue知识点整理

摘要：可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。我工作中只用到，对和不怎么熟与的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是...

mengbo 2019-08-23 11:54 评论0 收藏0
Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
最近遇到的前端面试题(2017.03.08更新版)

摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。一. 输入url后的加载过程从输入 URL 到页面加载完成的过程中都发生了什么计算机...

linkFly 2019-08-21 11:35 评论0 收藏0