Aplicação do hook useRef para DOM em React

Em uma das lições anteriores, mencionamos que as refs são mais frequentemente usadas para acessar elementos DOM.

As refs serão úteis quando você, por exemplo, precisa focar em um elemento, fazer uma rolagem ou calcular seu tamanho e posição, ou talvez usar alguns de seus métodos ou propriedades, pois para tais coisas o React não tem métodos incorporados.

Vamos ver em um exemplo com um input, como isso é feito. Vamos criar um componente com um input e um botão:

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

Para começar, vamos importar no componente useRef:

import { useRef } from 'react';

E vamos criar uma ref ref no componente. Vamos inicializá-la com o valor null:

const ref = useRef(null);

Vamos adicionar um manipulador de clique ao botão:

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

Para ter acesso ao input, vamos escrever nossa ref ref no atributo ref do input. Dessa forma, quando o React criar o nó DOM para este input, ele colocará uma referência a ele em ref.current e poderemos usar os métodos do input:

<input ref={ref} />

E finalmente, vamos adicionar a função de manipulação do clique, para que ao clicar no botão, o input seja focado. Agora podemos fazer isso através da ref, que contém a referência ao nosso input, acessando seu método focus:

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

Clique no botão e verifique que o input está sendo focado.

Pegue o código do componente App, que escrevemos nesta lição e faça com que ao clicar no botão, no input, além de focar, também ocorra a limpeza do campo de entrada. Use para isso a propriedade value do input.