4.9 ajout d'entrées de formulaire

Maintenant que nous comprenons l'état et l'écoute des événements, nous allons étoffer notre application pour qu'elle devienne réellement un outil de suivi des dépenses. Nous allons créer un formulaire de saisie permettant d'ajouter une nouvelle dépense (titre, montant, date).

Création du composant NewExpense

Dans le dossier components/, créez un nouveau dossier NewExpense/ et à l'intérieur un fichier NewExpense.js. On y met le squelette habituel : import React from 'react', déclaration en fonction fléchée, et export default NewExpense. Le composant retourne une <div> qui contiendra le formulaire. On crée aussi NewExpense.css pour le style (je vous laisse recopier le CSS fourni) et on l'importe en haut du fichier JS. Dans la div, on met className="new-expense".

Création du composant ExpenseForm

Dans le même dossier, créez ExpenseForm.js et ExpenseForm.css. Même structure : import React, composant fonction fléchée, export default. Le formulaire retourne un <form> contenant une div className="new-expense__controls" qui regroupe trois div className="new-expense__control" (au singulier) — un pour chaque champ :

• Titre : <label>Title</label> + <input type="text" />
• Montant : <input type="number" min="0.01" step="0.01" />
• Date : <input type="date" min="2019-01-01" max="2022-05-25" />

En dessous, on ajoute une div className="new-expense__actions" contenant un <button type="submit">Add Expense</button>. L'attribut type="submit" permet au bouton de déclencher la soumission du formulaire.

De retour dans NewExpense.js, on importe ExpenseForm et on l'utilise dans la div. Enfin, dans App.js, on importe NewExpense depuis ./components/NewExpense/NewExpense et on remplace le <h2> de démonstration par <NewExpense />. Sur la page web, le formulaire apparaît — pas encore très beau, mais on va arranger ça dans les prochains cours.