Datenattribute mit React.js erhalten

Question

Warum muss ich data-* in jede html child attribute eingeben, damit ich nicht undefined durch Klicken auf parent bekomme? D.h

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

Mit diesem Beispiel werde ich item-1 bekommen, wenn ich in der Nähe der Grenze von <li> klicken, aber wenn ich klicken Sie entweder img oder text/paragraph i undefined erhalten. Aber wenn ich data-item auf <li> childs setze, bekomme ich normalen data Wert. Was?

PS. Die Art, wie ich data-* erhalten, ist zum Beispiel

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

Was ich tue, falsch, dass ich in jedem <li> Kind zu setzen haben data-*, damit ich nicht auf ganze <li> Block on<Event> undefined bekommen?

Answer 1

FYI, das Problem hat nichts mit React zu tun. So funktionieren DOM-Ereignisse in Browsern. Sehen Sie sich at this quirksmode.org article an, um mehr darüber zu erfahren, wie die Ereignisausbreitung funktioniert.

event.target bezieht sich immer auf das Element, auf dem das Ereignis ausgelöst wurde. Wenn Sie also auf das Element <p> klicken, bezieht sich event.target auf dieses Element. Da <p> kein data-* Attribut hat, erhalten Sie undefined.

Um immer das Element, wo der Handler (das heißt das <li> Element in Ihrem Beispiel) gebunden ist, verwendet event.currentTarget statt.