Why do I have to put data-*
in every html child attribute
so i won't get undefined
by clicking on parent
? Ie
<li data-item="item-1">
<img src="../img" alt="img" />
<p>Some text</p>
</li>
By this example i will get item-1
whenever i click near the borders of <li>
but whenever i click either img
or text/paragraph
i get undefined
. But when I set data-item
on <li>
childs i get normal data
value. What?
PS. The way i get data-*
is for example
handleClick(event){
let data = event.target.dataset['item']
}
...
<li data-item="item-1" onClick={this.handleClick.bind(this)}>...</li>
What am I doing wrong, that I have to put into every <li>
child data-*
so I won't get undefined on whole <li>
block on<Event>
?
FYI, the problem has nothing to do with React. It's how DOM events in browsers work. Have a look at this quirksmode.org article to learn more about how event propagation works.
event.target
will always refer to the element the event was triggered on. So if you click on the <p>
element, event.target
will refer to that element. Since <p>
doesn't have a data-*
attribute you get undefined
.
To always get the element where the handler is bound to (ie the <li>
element in your example), use event.currentTarget
instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.