ReactJS - Composants Contrôlés : Un Guide Pour Débutants

Bonjour là-bas, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des Composants Contrôlés dans ReactJS. Ne vous inquiétez pas si vous êtes nouveau dans le monde de la programmation - je serai votre guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez capable de créer des formulaires comme un pro !

Qu'est-ce que les Composants Contrôlés ?

Avant de plonger dedans, penchons-nous sur une simple analogie. Imaginez que vous êtes dans un restaurant chic, et que vous souhaitez commander une pizza sur mesure. Dans cette situation, vous (le composant React) êtes en contrôle de ce qui se trouve sur la pizza (les données du formulaire). Chaque fois que vous souhaitez ajouter ou retirer un topping, vous le dites au serveur (l'état), et ils mettent votre commande à jour en conséquence. Voilà en substance comment fonctionnent les composants contrôlés dans React !

En termes de React, un composant contrôlé est un élément de formulaire d'entrée dont la valeur est contrôlée par React. Au lieu de laisser le DOM gérer les données du formulaire, React prend le relais.

Pourquoi Utiliser des Composants Contrôlés ?

1. Source Unique de Vérité : Toutes les données du formulaire sont stockées dans l'état du composant.
2. Accès Immédiat aux Entrées : Vous pouvez accéder aux valeurs des entrées immédiatement.
3. Plus de Contrôle : Vous pouvez manipuler et valider les données d'entrée facilement.

Maintenant, mettons les mains dans le cambouis avec un peu de code !

Composant Contrôlé avec un Unique champ d'Entrée

Commençons par un exemple simple - un champ de saisie de texte qui salue l'utilisateur.

import React, { useState } from 'react';

function GreetingInput() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Bonjour, {name} !</p>
</div>
);
}

export default GreetingInput;

Reprenons cela :

1. Nous importons useState de React pour gérer l'état de notre composant.
2. Nous créons une variable d'état name et sa fonction de mise à jour setName.
3. La fonction handleChange met à jour l'état name chaque fois que l'entrée change.
4. Dans le JSX, nous définissons la valeur de l'entrée comme name et attachons l'événement onChange à handleChange.
5. Nous affichons un salut en utilisant la valeur actuelle de name.

C'est l'essence d'un composant contrôlé - React contrôle la valeur de l'entrée via l'état.

Essayez par Vous-même !

Allez taper votre nom dans le champ d'entrée. Notez comment le salut est mis à jour instantanément ? C'est la magie des composants contrôlés !

Création d'un Formulaire Simple

Maintenant que nous avons les bases, créons un formulaire plus complexe avec plusieurs entrées.

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Commande passée ! Nom : ${order.name}, Taille : ${order.size}, Toppings : ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Votre Nom"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Petite</option>
<option value="medium">Moyenne</option>
<option value="large">Grande</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="fromage"
checked={order.toppings.includes('fromage')}
onChange={handleChange}
/>
Fromage
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Passer la Commande</button>
</form>
);
}

export default PizzaOrderForm;

Whaou, c'est beaucoup de code ! Mais ne vous inquiétez pas, nous allons le décomposer étape par étape :

1. Nous créons un objet d'état order qui contient toutes nos données de formulaire.
2. La fonction handleChange est maintenant plus complexe. Elle gère différents types d'entrée :

• Pour les textes et les sélections, elle met à jour la propriété correspondante dans l'état.
• Pour les cases à cocher, elle ajoute ou retire les toppings de la liste.

3. Nous avons une fonction handleSubmit qui empêche la soumission par défaut du formulaire et affiche une alerte avec les détails de la commande.
4. Dans le JSX, nous créons des entrées pour le nom, la taille (en tant que sélection) et les toppings (en tant que cases à cocher).
5. Chaque entrée's valeur (ou état checked pour les cases à cocher) est contrôlée par l'état order.

La Puissance des Formulaires Contrôlés

Avec cette configuration, vous avez un contrôle total sur vos données de formulaire. Vous souhaitez ajouter une validation ? Facile ! Modifiez simplement la fonction handleChange. Besoin de transformer les données avant soumission ? Mettez à jour la fonction handleSubmit. Les possibilités sont infinies !

Méthodes Courantes pour les Composants Contrôlés

Résumons quelques méthodes couramment utilisées avec les composants contrôlés :

Méthode	Description
useState	crochet pour gérer l'état du composant
onChange	gestionnaire d'événement pour les changements d'entrée
onSubmit	gestionnaire d'événement pour la soumission du formulaire
preventDefault	empêche le comportement par défaut de la soumission du formulaire
event.target.value	récupère la valeur actuelle d'une entrée
event.target.checked	récupère l'état checked d'une case à cocher

Conclusion

Félicitations ! Vous venez d'apprendre les composants contrôlés dans React. Nous avons couvert les entrées simples, les formulaires complexes, et même créé un formulaire de commande de pizza (je commence à avoir faim en y pensant) !

Souvenez-vous, les composants contrôlés vous donnent le pouvoir de gérer les données de formulaire avec précision. Cela peut sembler plus de travail au début, mais le contrôle et la flexibilité que vous gagnez en valent la peine.

Alors que vous continuez votre voyage dans React, vous trouverez des centaines de façons d'utiliser les composants contrôlés. Peut-être créerez-vous un éditeur de billets de blog, un formulaire d'inscription utilisateur, ou même une application de livraison de pizza (si vous le faites, envoyez-moi un code de réduction, s'il vous plaît) !

Continuez à pratiquer, restez curieux, et bon codage !

Credits: Image by storyset