Formulaires dans React
Les formulaires React sont couramment utilisés pour les pages de connexion, les formulaires d’inscription, les champs de recherche et les entrées utilisateurs complexes. L’utilisation de composants réutilisables permet d’encapsuler la logique des formulaires, de minimiser le prop drilling et d’éviter les re-renders inutiles, des problèmes fréquents dans les applications de grande taille. La maîtrise des formulaires React implique également de comprendre les composants contrôlés, la mise à jour de l’état, la gestion des événements et les hooks de cycle de vie comme useEffect pour gérer les effets secondaires.
Exemple de Base
jsximport React, { useState } from 'react';
function SimpleForm() {
const [formData, setFormData] = useState({ nom: '', email: '' });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Données soumises:', formData);
};
return ( <form onSubmit={handleSubmit}> <div> <label>Nom :</label> <input
type="text"
name="nom"
value={formData.nom}
onChange={handleChange}
/> </div> <div> <label>Email :</label> <input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/> </div> <button type="submit">Soumettre</button> </form>
);
}
export default SimpleForm;Dans cet exemple de base, nous présentons un formulaire contrôlé dans React. Le hook useState initialise formData avec deux champs : nom et email. La fonction handleChange met à jour dynamiquement le champ correspondant dans l’état en utilisant l’opérateur spread, assurant l’immuabilité, cruciale pour l’optimisation du rendu dans React. La fonction handleSubmit empêche le comportement par défaut du formulaire, permettant de gérer les données de manière personnalisée, ici en les affichant dans la console.
Exemple Pratique
jsximport React, { useState, useEffect } from 'react';
function AdvancedForm() {
const [formData, setFormData] = useState({ utilisateur: '', motdepasse: '' });
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const validate = () => {
};
const handleSubmit = (e) => {
e.preventDefault();
setIsSubmitting(true);
setTimeout(() => {
console.log('Formulaire soumis avec succès:', formData);
setIsSubmitting(false);
}, 1000);
}
};
useEffect(() => {
if (isSubmitting) console.log('Soumission en cours...');
}, [isSubmitting]);
return ( <form onSubmit={handleSubmit}> <div> <label>Utilisateur :</label> <input
type="text"
name="utilisateur"
value={formData.utilisateur}
onChange={handleChange}
/>
{errors.utilisateur && <span>{errors.utilisateur}</span>} </div> <div> <label>Mot de passe :</label> <input
type="password"
name="motdepasse"
value={formData.motdepasse}
onChange={handleChange}
/>
{errors.motdepasse && <span>{errors.motdepasse}</span>} </div> <button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Soumission...' : 'Soumettre'} </button> </form>
);
}
export default AdvancedForm;📊 Tableau de Référence
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useState | Gérer l’état interne d’un composant | const [value, setValue] = useState(initialValue); |
| useEffect | Gérer les effets secondaires et le cycle de vie | useEffect(() => { console.log('Monté'); }, []); |
| onChange | Écouter les modifications de l’utilisateur | <input onChange={handleChange} /> |
| onSubmit | Gérer la soumission du formulaire | <form onSubmit={handleSubmit}></form> |
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut