Supongamos que tengo un cuadro div de 200 px por 500 px.
El objetivo es agregar un detector de eventos para determinar las coordenadas x e y dentro de este div en el que se hace clic.
¿Cómo puede estar eso abajo en React?
Puede usar getBoundingClientRect() para obtener la posición del elemento, además de MouseEvent.clientX y MouseEvent.clientY para obtener la coordenada del clic.
Ver demostración:
function XYComponent() { const go = (e) => { const offsets = e.target.getBoundingClientRect(); const y = e.clientY - offsets.top; const x = e.clientX - offsets.left; console.log(x, y); } return ( <div> <div class="demo" onClick={go}>AAA</div> <div class="demo" onClick={go}>BBB</div> </div> ) } ReactDOM.render(<XYComponent />, document.querySelector("#app")) body { font-family: monospace; } .demo { border: 1px solid black; padding: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>