¡Descubre para qué es útil el gancho useRef de React y cómo trabajar con él!
Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos.
Un gancho de React que a veces uso es useRef
.
import React, { useRef } from 'react'
Este gancho nos permite acceder a un elemento DOM de forma imperativa.
A continuación se muestra un ejemplo en el que registro en la consola el valor de la referencia DOM del elemento span que contiene el valor de conteo:
import React, { useState, useRef } from 'react'const Counter = () = { const [count, setCount] = useState(0) const counterEl = useRef(null) const increment = () = { setCount(count + 1) console.log(counterEl) } return ( Count: span ref={counterEl}{count}/span button onClick={increment}+/button / )}ReactDOM.render(Counter /, document.getElementById('app'))
Observe la const counterEl = useRef(null)
línea y el span ref={counterEl}{count}/span
. Esto es lo que establece el vínculo. Captain Tsubasa Spain
Ahora podemos acceder a la referencia DOM accediendo a counterEl.current
.
Míralo en Codepen: https://codepen.io/flaviocopes/pen/orENKo/
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo utilizar el gancho useRef de React
Primero, consulta mi introducción a los ganchos de React, si eres nuevo en ellos. ¡Descubre para qué es útil el gancho useRef de React y cómo trabajar con
programar
es
https://aprendeprogramando.es/static/images/programar-como-utilizar-el-gancho-useref-de-react-2046-0.jpg
2024-11-01