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.