Uso del hook useRef para DOM en React

En una de las lecciones anteriores mencionamos que las referencias se usan más frecuentemente para acceder a elementos DOM.

Las referencias serán útiles cuando, por ejemplo, necesites enfocar un elemento, hacer scroll o calcular su tamaño y posición, o posiblemente usar algunos de sus métodos o propiedades, ya que para tales cosas en React no hay métodos incorporados.

Veamos en un ejemplo con un campo de entrada, cómo se hace. Creemos un componente con un campo de entrada y un botón:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Para empezar, importemos en el componente useRef:

import { useRef } from 'react';

Y creemos una referencia ref en el componente. Inicialicémosla con el valor null:

const ref = useRef(null);

Añadamos al botón un manejador de clic:

<button onClick={handleClick}>focus</button>

Para tener acceso al campo de entrada, escribamos nuestra referencia ref en el atributo ref del campo de entrada. De esta manera, cuando React cree el nodo DOM para este campo de entrada, colocará una referencia a él en ref.current y podremos usar los métodos del campo de entrada:

<input ref={ref} />

Y finalmente, agreguemos la función de manejo del clic, para que al hacer clic en el botón, el campo de entrada reciba el foco. Ahora podemos hacerlo a través de la referencia, en la cual está el enlace a nuestro campo de entrada, accediendo a su método focus:

function handleClick() {
	ref.current.focus();
}

Presiona el botón y asegúrate de que el campo de entrada recibe el foco.

Toma el código del componente App, que escribimos en esta lección y haz que al hacer clic en el botón en el campo de entrada, además de enfocar, también ocurra un borrado del campo de entrada. Utiliza para esto la propiedad value del campo de entrada.