Tengo un fragmento simple donde adjunto un oyente onMouseMove a un div dado:
<div onMouseMove={handleMouseMove}> <div>A</div> <div>B</div> <div>C</div> </div> Quiero saber la posición X del puntero del mouse dentro del div principal al que conecté el oyente del mouse. Sin embargo, el evento parece contener solo referencias a los divs secundarios (como target ) y la raíz (como objetivo currentTarget ).
La propiedad nativeEvent del evento tampoco parece ayudar.
Estoy en React 17. Creo que esto lo hace más difícil, ya que anteriormente currentTarget a ese div donde coloqué al oyente, pero en React 17 estos oyentes a la raíz.
¿Cómo puedo obtener las coordenadas dentro del div al que adjunté al oyente?
¡Gracias!
Esto funciona como se esperaba en la versión de react 17.0.2
function Component() { const onMouseMove = (e) => { let rect = e.currentTarget.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; console.log(x, y); }; return ( <div onMouseMove={onMouseMove}> <div>A</div> <div>B</div> <div>C</div> </div> ); } Basado en esta respuesta y un comentario al respecto, sobre el uso de un currentTarget