使用React.js獲取數據屬性

Question

為什么我必須在每個html child attribute放入data-*所以我不會通過單擊parent來undefined ？ 即

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

通過這個例子，每當我點擊<li>的邊界附近時我都會得到item-1但是每當我點擊img或text/paragraph我都會得到undefined 。 但是當我在<li> childs上設置data-item ，我獲得了正常的data值。 什么？

PS。 我獲得data-*的方式是data-*

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

我做錯了什么，我必須在每個<li>子data-*所以我不會on<Event>上的整個<li>塊on<Event>得到未定義的？

Answer 1

僅供參考，這個問題與React無關。 這是瀏覽器中DOM事件的工作方式。 查看這篇quirksmode.org文章 ，了解有關事件傳播如何工作的更多信息。

event.target將始終引用觸發事件的元素。 因此，如果單擊<p>元素， event.target將引用該元素。 由於<p>沒有data-*屬性，因此undefined 。

要始終獲取綁定處理程序的元素（即示例中的<li>元素），請使用event.currentTarget 。