Utilisation du hook useRef pour le DOM dans React

Lors d'une des leçons précédentes, nous avons mentionné que les refs sont le plus souvent utilisées pour accéder aux éléments DOM.

Les refs viendront à la rescousse lorsque vous aurez, par exemple, besoin de mettre le focus sur un élément, de faire un défilement ou de calculer ses dimensions et sa position, ou peut-être d'utiliser certaines de ses méthodes ou propriétés, car pour de telles choses, React n'a pas de méthodes intégrées.

Regardons sur un exemple avec un champ de saisie, comment cela se fait. Créons un composant avec un champ de saisie et un bouton :

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

Pour commencer, importons dans le composant useRef :

import { useRef } from 'react';

Et créons une ref ref dans le composant. Initialisons-la avec la valeur null :

const ref = useRef(null);

Ajoutons un gestionnaire de clic sur le bouton :

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

Pour avoir accès au champ de saisie, enregistrons notre ref ref dans l'attribut ref du champ de saisie. Ainsi, lorsque React créera le nœud DOM pour ce champ de saisie, il placera une référence vers celui-ci dans ref.current et nous pourrons utiliser les méthodes du champ de saisie :

<input ref={ref} />

Et enfin, ajoutons la fonction de gestion du clic, pour que lors d'un clic sur le bouton, le focus soit mis sur le champ de saisie. Maintenant nous pouvons le faire via la ref, qui contient la référence à notre champ de saisie, en accédant à sa méthode focus :

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

Cliquez sur le bouton et assurez-vous que le focus est mis sur le champ de saisie.

Prenez le code du composant App, que nous avons écrit dans cette leçon et modifiez-le pour qu'en cliquant sur le bouton, en plus de mettre le focus sur le champ de saisie, le champ soit également vidé. Utilisez pour cela la propriété value du champ de saisie.