4.5 écouter l'entrée de l'utilisateur

Maintenant que nous savons gérer un état avec useState, voyons comment écouter l'entrée de l'utilisateur dans un champ de formulaire. Retournons dans le fichier ExpenseForm.js. Sur le premier <input type="text" /> (celui du titre), nous allons ajouter l'attribut onChange.

Définir un handler titleChangeHandler

En dessous du const ExpenseForm = () =>, déclarez une fonction fléchée titleChangeHandler qui sera appelée à chaque modification du champ. Puis attachez-la à l'input via onChange :

const titleChangeHandler = (event) => {
  console.log('Titre changé !');
  console.log(event.target.value);
};

return (
  <form>
    <input type="text" onChange={titleChangeHandler} />
    ...
  </form>
);

Le handler reçoit en paramètre un objet event qui contient toutes les informations sur l'événement déclenché. La propriété event.target pointe vers l'élément DOM ciblé (notre input), et event.target.value contient la valeur actuelle saisie. Si vous tapez quelque chose dans le champ et que vous ouvrez la console (F12), vous verrez « Titre changé ! » suivi de la valeur courante à chaque caractère tapé.

Petit rappel : dans le cours précédent, j'avais oublié de vous donner le code CSS du fichier ExpenseForm.css. Je vous laisse recopier le style que je vous montre à l'écran pour habiller proprement le formulaire. Une fois tout en place, l'écoute des saisies fonctionne correctement. On se retrouve dans le prochain cours pour gérer les trois champs (titre, montant, date) avec plusieurs états.

En résumé

Cette leçon explique comment capturer les saisies utilisateur dans un formulaire React en utilisant un gestionnaire onChange. L'utilisateur apprendra à accéder à la valeur de l'input via event.target.value et à la logger pour vérifier que l'événement fonctionne correctement. C'est une étape essentielle pour synchroniser l'état du composant avec les données saisies par l'utilisateur.

Points clés

• Ajouter un gestionnaire onChange sur l'input du formulaire
• Utiliser event.target.value pour récupérer la valeur saisie par l'utilisateur
• Logger la valeur avec console.log pour déboguer et vérifier le fonctionnement
• Comprendre que chaque changement d'input déclenche le gestionnaire onChange
• Préparer le code pour mettre à jour l'état du composant avec la valeur captée

Questions fréquentes

Qu'est-ce qu'un gestionnaire onChange en React ?

C'est une fonction attachée à un élément input qui se déclenche chaque fois que l'utilisateur modifie le contenu du champ. Elle permet de capturer et traiter les changements d'entrée en temps réel.

Comment accéder à la valeur saisie dans l'input ?

Via l'objet event passé au gestionnaire onChange : event.target.value vous donne la chaîne de caractères actuellement saisie dans le champ input.

Pourquoi utiliser console.log dans le gestionnaire ?

Pour déboguer et vérifier que le gestionnaire fonctionne correctement. Vous voyez s'afficher chaque valeur saisie dans la console du navigateur, ce qui confirme que le code d'écoute est en place.