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

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

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

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

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

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

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

handleMsglistStar(e){    console.log(e.currentTarget);  //拿到当前触发 onClick事件的元素          e.stopPropagation() //停止事件捕捉    e.preventDefault() //加上并没什么X用，事件向上冒泡}

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

1. bubbles 返回布尔值，指示事件是否是起泡事件类型。

2. cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。

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

4. eventPhase 返回事件传播的当前阶段。

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

6. timeStamp 返回事件生成的日期和时间。

7. type 返回当前 Event 对象表示的事件的名称。

看上去也就这两个是我喜欢类型 currentTarget ， target

1. target 触发事件的元素。

2. currentTarget 事件绑定的元素。

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

handleMsglistStar(e){    console.log(e.currentTarget);            e.stopPropagation()    e.preventDefault()}

{this.props.textList.map(function(item){return (    )}.bind(this))}

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

关键字：react.js, JavaScript, es6, 事件

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！