¿Por qué tengo que poner data-* en cada html child attribute para que no quede undefined al hacer clic en el parent ? Es decir
<li data-item="item-1"> <img src="../img" alt="img" /> <p>Some text</p> </li> Con este ejemplo, obtendré item-1 cada vez que haga clic cerca de los bordes de <li> pero cada vez que haga clic en img o text/paragraph obtengo undefined . Pero cuando configuro data-item en <li> childs, obtengo un valor data normal. ¿Qué?
PD. La forma en que obtengo data-* es, por ejemplo
handleClick(event){ let data = event.target.dataset['item'] } ... <li data-item="item-1" onClick={this.handleClick.bind(this)}>...</li> ¿Qué estoy haciendo mal, que tengo que poner en cada <li> data-* para que no quede indefinido en todo el bloque <li> on<Event> ?
FYI, el problema no tiene nada que ver con React. Así es como funcionan los eventos DOM en los navegadores. Eche un vistazo a este artículo de quirksmode.org para obtener más información sobre cómo funciona la propagación de eventos.
event.target siempre se referirá al elemento en el que se activó el evento. Entonces, si hace clic en el elemento <p> , event.target se referirá a ese elemento. Dado que <p> no tiene un atributo data-* , obtienes undefined .
Para obtener siempre el elemento al que está vinculado el controlador (es decir, el elemento <li> en su ejemplo), use event.currentTarget en su lugar.