Cómo utilizar el gancho useRef de React

 

 

 

Como utilizar el gancho useref de react 1

¡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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Como utilizar el gancho useref de react 1
Como utilizar el gancho useref de react 1

 

 

Update cookies preferences