使用React.js獲取數據屬性

Question

爲什麼我必須在每html child attribute中放置data-*，所以我不會通過點擊parent獲取undefined？即

<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代替。