使用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事件的工作方式。查看at this quirksmode.org article以了解有关事件传播如何工作的更多信息。

event.target将始终引用触发事件的元素。因此，如果您点击<p>元素，event.target将引用该元素。由于<p>没有data-*属性，因此您获得undefined。

要始终获取处理程序绑定到的元素（例如示例中的<li>元素），请改用event.currentTarget。