Champs de saisie contrôlés

Les champs de saisie texte posent une question : l'utilisateur tape dans la zone de texte, mais votre composant a un état : à qui appartient le texte ? Dans React, la réponse est : l'état en est le propriétaire. C'est ce qu'on appelle un composant contrôlé (controlled input) :

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Deux fils créent la boucle :

• value={name} : la zone de texte affiche toujours l'état
• onChange : chaque touche pressée appelle le setter avec e.target.value, le texte actuel de la zone

Ainsi, la saisie met à jour l'état, l'état se ré-exécute et la zone affiche le nouvel état. Le résultat : le texte réside dans une variable que vous pouvez valider, transformer, effacer ou afficher n'importe où ailleurs sur la page.