4.11 traitement de la soumission du formulaire

Pour traiter la soumission du formulaire, on pourrait ajouter un écouteur onClick sur le bouton « Ajouter une dépense ». Mais ce n'est pas la meilleure approche : les formulaires HTML possèdent un comportement par défaut intégré au navigateur (rechargement de la page après soumission). Le plus propre est donc d'écouter directement l'événement submit sur la balise <form>.

Écouter l'événement submit avec onSubmit

On ajoute l'attribut onSubmit sur le formulaire et on lui passe une fonction handler, qu'on nommera submitHandler. Cette fonction reçoit l'événement event en paramètre. La première chose à faire est d'appeler event.preventDefault() pour empêcher le navigateur de recharger la page. La méthode preventDefault est rattachée à l'interface Event et indique à l'agent utilisateur que si l'événement n'est pas explicitement géré, l'action par défaut ne doit pas être exécutée.

Ensuite, on crée un nouvel objet expenseData qui regroupe toutes les valeurs saisies par l'utilisateur. Si vous aviez utilisé l'approche à un seul état regroupé, vous auriez déjà cet objet ; ici nous avons trois états séparés, donc nous les combinons à la main :

const submitHandler = (event) => {
  event.preventDefault();

  const expenseData = {
    title: enteredTitle,
    amount: enteredAmount,
    date: new Date(enteredDate)
  };

  console.log(expenseData);
};

On retrouve les trois propriétés : title, amount et date, cette dernière étant convertie en véritable objet Date JavaScript via new Date(enteredDate). Les noms de propriétés (à gauche du :) sont libres puisque c'est votre objet. Pour vérifier que tout fonctionne, on ajoute un console.log(expenseData).

Maintenant, allez tester le formulaire sur votre site web : ouvrez la console du navigateur (F12), remplissez les trois champs, cliquez sur « Ajouter », et vous devriez voir l'objet expenseData s'afficher dans la console. On se retrouve dans le prochain cours.

En résumé

Cette leçon montre comment gérer correctement la soumission d'un formulaire en React en ajoutant un listener `onSubmit` au lieu d'écouter un simple clic sur le bouton. L'enseignant explique l'utilisation cruciale de la méthode `preventDefault()` pour empêcher le rechargement automatique de la page, comportement par défaut du navigateur. Une fois la soumission capturée, vous apprenez à extraire les données du formulaire (titre, montant, date) et à les structurer dans un objet pour les traiter ou les stocker ultérieurement.

Points clés

• Préférer l'événement 'submit' du formulaire plutôt qu'un écouteur 'click' sur le bouton pour une meilleure sémantique
• Utiliser event.preventDefault() pour annuler le comportement par défaut du navigateur (rechargement de page)
• Extraire les valeurs des champs de saisie depuis l'état React (title, amount) et les combiner avec une nouvelle date
• Structurer les données soumises dans un objet (expensesData) contenant titre, montant et date
• Utiliser console.log pour valider que les données sont correctement capturées lors de la soumission
• Cette approche facilite la transmission des données vers une API ou leur sauvegarde dans un état global

Questions fréquentes

Pourquoi utiliser onSubmit du formulaire au lieu d'un écouteur click sur le bouton?

L'événement 'submit' du formulaire est le moyen sémantiquement correct et natif pour réagir à la soumission d'un formulaire. Il capture non seulement les clics sur le bouton submit, mais aussi la soumission par la touche Entrée. De plus, c'est le seul endroit où vous pouvez efficacement utiliser preventDefault() pour empêcher le rechargement de la page.

Que fait exactement event.preventDefault()?

La méthode preventDefault() annule l'action par défaut associée à l'événement. Pour un formulaire, l'action par défaut du navigateur est de recharger la page. En appelant preventDefault(), vous arrêtez ce rechargement automatique et gardez le contrôle total du flux, permettant à React de gérer les données de façon personnalisée.

Comment structurer et passer les données du formulaire après la soumission?

Créez un objet avec les valeurs stockées dans l'état (titre et montant) et ajoutez une nouvelle date avec `new Date()`. Cet objet (expensesData) peut ensuite être envoyé à une API, ajouté à une liste d'état, ou traité selon vos besoins applicatifs. Utilisez console.log pour valider la structure avant d'aller plus loin.