Champs de saisie contrôlés

Les champs de saisie soulèvent une question : l’utilisateur tape dans la zone, mais votre composant possède un état : qui est propriétaire du texte ? Dans React, la réponse est : c’est l’état qui le contrôle. C’est ce qu’on appelle un champ contrôlé :

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.