En Vanilla Javascript puedo acceder a la palabra clave 'esta' en detectores de eventos como este:
<body> <button type="button" onclick="test(this)">Click Me</button> <script> function test(t) { console.log(t); //this } </script> </body>o así
<body> <button id="test" type="button">Click Me</button> <script> document.getElementById("test").onclick = function () { console.log(this); }; </script> </body>Pero, ¿cómo accedo al elemento DOM usando la palabra clave 'this' en el detector de eventos de reacción?
export default function Button() { function test() { console.log(this); //undefined } return ( <button onClick={test} id="test" type="button"> Click Me </button> ); }Sé que puedo acceder al elemento de destino usando el objeto 'evento'. Pero tengo curiosidad por saber si es posible usar 'esto' en el oyente de eventos de reacción
Pase un parámetro para obtener el argumento del evento.
p.ej:
function test(event) { console.log(event.target); // returns the element which trigered the event console.log(event.currentTarget); // returns the element that the event listener is attached to. } Pero si no quiere hacerlo de esta manera, también puede usar el método querySelector dentro del evento.
const element = document.querySelector("#test");Puede usar ref para acceder a los nodos DOM en React.
import React, { useRef } from "react"; function Button() { const buttonRef = useRef(null); function test() { console.log(buttonRef.current); } return ( <button onClick={test} id="test" type="button" ref={buttonRef}> Click Me </button> ); } Lea más sobre ref aquí: https://reactjs.org/docs/hooks-reference.html#useref