Utilizzo dell'hook useRef per il DOM in React

In una delle lezioni precedenti abbiamo menzionato che i ref sono più frequentemente utilizzati per accedere agli elementi DOM.

I ref verranno in vostro aiuto quando, ad esempio, avete bisogno di mettere a fuoco un elemento, eseguire uno scroll o calcolarne le dimensioni e la posizione, o forse utilizzare alcuni dei suoi metodi o proprietà, dato che per queste cose React non ha metodi integrati.

Diamo un'occhiata a un esempio con un input, per vedere come si fa. Creiamo un componente con un input e un pulsante:

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

Per iniziare, importiamo nel componente useRef:

import { useRef } from 'react';

E creiamo un ref ref nel componente. Inizializziamolo con il valore null:

const ref = useRef(null);

Aggiungiamo al pulsante un gestore del click:

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

Per avere accesso all'input, inseriamo il nostro ref ref nell'attributo ref dell'input. In questo modo, quando React creerà il nodo DOM per questo input, metterà un riferimento ad esso in ref.current e noi potremo utilizzare i metodi dell'input:

<input ref={ref} />

E infine, aggiungiamo la funzione di gestione del click, in modo che quando si clicca sul pulsante, l'input venga messo a fuoco. Ora possiamo farlo tramite il ref, che contiene il riferimento al nostro input, accedendo al suo metodo focus:

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

Cliccate il pulsante e verificate che l'input venga messo a fuoco.

Prendete il codice del componente App, che abbiamo scritto in questa lezione e fate in modo che al click sul pulsante nell'input, oltre alla messa a fuoco, avvenga anche la pulizia del campo di input. Utilizzate a questo scopo la proprietà value dell'input.