ReactJS - Programmation des formulaires

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans le monde passionnant de la programmation des formulaires avec ReactJS. En tant que votre professeur de sciences informatiques de quartier, je suis là pour vous guider à travers ce périple pas à pas. Alors, prenez une tasse de café (ou votre boisson favorite) et mettons-nous en route !

Qu'est-ce que les formulaires dans ReactJS ?

Avant de nous lancer dans le code, comprenons ce qu'est un formulaire et pourquoi il est important. Les formulaires sont comme les gardiens de l'entrée utilisateur dans les applications web. Ils permettent aux utilisateurs d'interagir avec notre application, en fournissant des informations que nous pouvons traiter et utiliser. Dans React, les formulaires sont un peu spéciaux car ils conservent leur propre état. Cela signifie que nous devons les gérer un peu différemment que les autres éléments.

Les bases de la gestion des formulaires

Commençons par un exemple de formulaire simple :

import React, { useState } from 'react';

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

const handleSubmit = (event) => {
event.preventDefault();
alert('Un nom a été soumis : ' + name);
}

return (
<form onSubmit={handleSubmit}>
<label>
Nom :
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>
<input type="submit" value="Soumettre" />
</form>
);
}

Reprenons cela :

1. Nous importons useState de React pour gérer notre état de formulaire.
2. Nous créons une variable d'état name et une fonction setName pour la mettre à jour.
3. La fonction handleSubmit empêche la soumission par défaut du formulaire et affiche une alerte avec le nom soumis.
4. Dans le formulaire, nous définissons la value de l'input sur notre état name et utilisons onChange pour mettre à jour l'état lorsque l'input change.

C'est le cœur de la gestion des formulaires dans React. Nous contrôlons l'état du formulaire avec React, c'est pourquoi nous appelons cela un "composant contrôlé".

Gestion de plusieurs inputs

Maintenant, que faire si nous avons plusieurs inputs ? Doit-on créer un état séparé pour chacun ? Pas nécessairement ! Jetons un œil à un formulaire plus complexe :

import React, { useState } from 'react';

function MultipleInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Formulaire soumis:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Prénom"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Nom"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Soumettre</button>
</form>
);
}

Dans cet exemple, nous utilisons un seul objet d'état pour gérer tous nos champs de formulaire. La fonction handleChange utilise l'attribut name de l'input pour mettre à jour le champ correct dans notre état. Cette approche fonctionne bien lorsque vos formulaires deviennent plus grands.

Gestion de différents types d'inputs

Les formulaires ne se limitent pas aux inputs texte. Voyons comment gérer différents types d'inputs :

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Formulaire soumis:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Nom"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Âge"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Sélectionnez le sexe</option>
<option value="male">Homme</option>
<option value="female">Femme</option>
<option value="other">Autre</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Êtes-vous un étudiant ?
</label>
<fieldset>
<legend>Couleur favorite</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Rouge
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Bleu
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Vert
</label>
</fieldset>
<button type="submit">Soumettre</button>
</form>
);
}

Ce formulaire montre comment gérer divers types d'inputs : texte, nombre, sélection, case à cocher et boutons radio. La clé réside dans la fonction handleChange, qui vérifie le type d'input et met à jour l'état en conséquence.

Validation des formulaires

Aucun formulaire n'est complet sans validation. Ajoutons une validation de base à notre formulaire :

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});

const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Le nom d\'utilisateur est requis';
if (!formData.email) {
newErrors.email = 'L\'email est requis';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'L\'email est invalide';
}
if (!formData.password) {
newErrors.password = 'Le mot de passe est requis';
} else if (formData.password.length < 6) {
newErrors.password = 'Le mot de passe doit comporter au moins 6 caractères';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Formulaire soumis:', formData);
// Ici, vous enverriez généralement les données à un serveur
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Nom d'utilisateur"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Mot de passe"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Soumettre</button>
</form>
);
}

Dans cet exemple, nous avons ajouté une fonction validateForm qui vérifie les champs vides et la validité de l'email et de la longueur du mot de passe. Nous stockons toute erreur dans un objet d'état séparé et les affichons sous les champs pertinents.

Conclusion

Et voilà ! Nous avons couvert les bases de la gestion des formulaires dans React, des inputs texte simples aux formulaires plus complexes avec divers types d'inputs et validation. Souvenez-vous, la pratique rend parfait. Essayez de construire vos propres formulaires, expérimentez avec différents types d'inputs et n'ayez pas peur de faire des erreurs - c'est ainsi que nous apprenons !

Voici un tableau de référence rapide des méthodes que nous avons utilisées :

Méthode	Objectif
useState	Pour créer et gérer l'état dans les composants fonctionnels
onChange	Pour gérer les changements dans les inputs du formulaire
onSubmit	Pour gérer la soumission du formulaire
preventDefault	Pour empêcher le comportement par défaut de la soumission du formulaire

Bonne programmation, et que vos formulaires soient toujours conviviaux et exempts de bugs !

Credits: Image by storyset