使用React.js获取数据属性

Question

为什么我必须把它放进去data-*,html child attribute所以我不会undefined点击parent？即

<li data-item="item-1">
  <img src="../img" alt="img" />
  <p>Some text</p>
</li>

通过这个例子,item-1每当我点击边界附近时我都会得到,<li>但每当我点击img或者text/paragraph我得到undefined.但是当我data-item对<li>孩子们开始时我会得到正常的data价值.什么？

PS.我得到的方式data-*就是例如

handleClick(event){
  let data = event.target.dataset['item']
}
...
<li data-item="item-1" onClick={this.handleClick.bind(this)}>...</li>

我做错了什么,我必须把每个<li>孩子都放进去,data-*所以我不会在整个<li>街区得到不确定的东西on<Event>？

Answer 1

仅供参考,这个问题与React无关.这是浏览器中DOM事件的工作方式.查看这篇quirksmode.org文章,了解有关事件传播如何工作的更多信息.

event.target将始终引用触发事件的元素.因此,如果单击<p>元素,event.target将引用该元素.由于<p>没有data-*你得到的属性undefined.

要始终获取处理程序绑定到的<li>元素(即示例中的元素),请event.currentTarget改为使用.