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.

En résumé

Cette leçon montre comment construire un formulaire pour ajouter de nouvelles dépenses dans une application React. Vous apprendrez à créer un composant dédié avec des champs d'entrée (titre, montant, date), à intégrer une feuille de styles CSS appropriée, et à structurer le code avec des imports et exports React. À la fin de la leçon, le formulaire est fonctionnel et intégré à l'application de suivi des dépenses.

Points clés

• Créer un nouveau dossier et composant React dédiés aux dépenses (new-expenses.js et ExpenseForm)
• Implémenter un formulaire avec des champs d'entrée : label/input pour titre, montant, et date (avec attribut max)
• Structurer le formulaire avec des divs organisées (conteneur, contrôles, actions) et un bouton de soumission avec type="submit"
• Utiliser les imports et exports React (import et export default) pour modulariser le code
• Appliquer une feuille de styles CSS (new-expenses.css) pour mettre en forme le formulaire

Questions fréquentes

Quels champs d'entrée doit contenir le formulaire de nouvelles dépenses ?

Le formulaire comporte trois champs principaux : un input texte pour le titre de la dépense, un input texte pour le montant, et un input date pour enregistrer la date de la dépense (avec un attribut max fixé à "2022-05-25").

Comment organiser la structure du formulaire en React ?

La structure comprend une div conteneur avec la classe "new-expenses-controls" qui enveloppe les labels et inputs, et une deuxième div avec la classe "new-expenses-actions" qui contient le bouton de soumission.

Quel est le rôle du composant ExpenseForm dans cette architecture ?

ExpenseForm est le composant qui encapsule le formulaire complet et est ensuite importé dans le composant NewExpenses. Cela suit le pattern de modularisation React en séparant la logique du formulaire dans son propre fichier et composant.