React.jsでデータ属性を取得する

Question

html child attributeにdata-*を入れなければならないのはなぜですかをparentをクリックしても得られませんか？すなわち

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

この例により、私は<li>の国境近くでクリックが、私はimgまたはtext/paragraphのいずれかをクリックしたときに私はundefinedを取得するたびに、私はitem-1を取得します。しかし、私が<li>子どもに私がdata-itemを設定すると、私は普通のdata値を得ます。何？

PS。私はdata-*を得る方法は、例えば

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

である私は、私はので、私は全体<li>ブロックon<Event>に未定義得ることはありませんすべての<li>子data-*に入れなければならないこと、間違って何をしているのですか？

Answer 1

参考までに、この問題はReactとは関係ありません。ブラウザのDOMイベントがどのように機能するかです。イベントの伝播の仕組みの詳細については、at this quirksmode.org articleをご覧ください。

event.targetは、イベントがトリガーされた要素を常に参照します。したがって、<p>要素をクリックすると、event.targetはその要素を参照します。 <p>にはdata-*という属性がないので、undefinedとなります。

代わりに常にevent.currentTargetを使用し、ハンドラが（あなたの例では、すなわち<li>要素）にバインドされている要素を取得します。