Les développeurs rencontrent souvent des difficultés pour créer des formulaires interactifs et réactifs en utilisant ReactJS, surtout lorsqu’il s’agit de gérer efficacement l’état des données utilisateur.
Sans une approche structurée, ces formulaires peuvent rapidement devenir difficiles à maintenir, entraînant des erreurs de validation et une mauvaise expérience utilisateur.
Cet article vous guide étape par étape dans la création d’un formulaire ReactJS fonctionnel, avec une gestion optimale de l’état et des données, pour des interfaces plus fluides et performantes.
Exercice d’application
Pour appliquer les concepts que nous avons abordés sur les contrôles de formulaire en ReactJS, je vais vous présenter l’exercice que nous allons travailler ensemble.
Voici un formulaire simple à compléter. Lorsque l’utilisateur envoie les données, une alerte récapitulant les informations saisies s’affichera après.
Ainsi, pour avancer vers la concrétisation de ce projet fantastique, nous commencerons par établir les fondations essentielles en premier lieu.
Créerons d’abord un fichier app.js dans le dossier src : src/ app.js
import './styles/app.css'
export default function App(){
return(
<section>
<h3>Envoyer de message</h3>
</section>
)
}
Ensuite, nous l’importerons dans le fichier index.js afin d’appeler notre composant à partir de src/index.js.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import App from './app';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
Afin d’apporter une légère mise en forme à notre application, nous allons créer un fichier app.css dans le répertoire styles : src/styles/app.css.
body{
background-color:#16a085;
}
section{
background-color:#ecf0f1;
width: 250px;
margin: auto;
margin-top: 40px;
padding: 15px;
border-radius: 5px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
}
section h3{
text-align: center;
color: #c0392b;
font-size: 1rem;
}
Nous avons maintenant correctement établi les fondations de notre projet. En le lançant, nous obtiendrons quelque chose de similaire à ceci dans le navigateur :
Excellent travail, n’est-ce pas ? Maintenant, passons à la création de notre formulaire.
Créons maintenant le composant formulaire pour notre message.
Src/component /message.js
import '../styles/message.css'
export default function Message(){
return(
<form>
<div>
<label htmlFor="nom">Nom:</label>
<input
type="text"
id="nom"
name="nom"
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
/>
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea
id="msg"
name="msg"
/>
</div>
<button type="submit">Envoyer</button>
</form>
)
}
Maintenant, nous allons utiliser une nouvelle approche. Au lieu d’importer directement notre composant dans le fichier index.js, importons-le dans le fichier app.js. Comme nous l’avons déjà importé précédemment, le fichier app.js dans le fichier index.js importe tout son contenu.
Src/app.js
import Message from './component/message'
import './styles/app.css'
export default function App(){
return(
<section>
<h3>Envoyer de message</h3>
<Message/>
</section>
)
}
C’est ligne qu’on a modifiée
import Message from ‘./component/message’
Pour vérifier notre progression, lançons maintenant le projet:
npm start
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Nous disposons désormais d’un formulaire assez basique. Apportons-lui quelques modifications esthétiques en utilisant CSS maintenant.
Src/styles/message.css
form div{
margin-bottom: 10px;
}
form label {
display: block;
margin-bottom: 5px;
font-weight: 700;
}
form input,form textarea{
width: 100%;
padding: 9px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ddd;
outline: none;
}
form button{
display: block;
margin: auto;
background-color:#007bff;
border:none;
padding: 10px 20px;
color:#fff;
border-radius:5px;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
}
form button:hover{
background-color:#0056b3;
}
Et par la suite, vous lancez le projet et vous verrez que notre page prend une forme comme ceci :
Excellent, nous sommes sur le point d’atteindre notre objectif.
Nous allons maintenant contrôler notre formulaire.
Examinons notre composant dans notre composant : src/component/message.js
import { useState } from 'react'
import '../styles/message.css'
export default function Message(){
const [formData,setFormData] = useState({
nom:'',
email:'',
msg:''
});
function Changer (e){
let {name,value} = e.target;
setFormData({
...formData,[name] : value
});
}
function Valider(e) {
e.preventDefault();
let message = `
Votre nom : ${formData.nom}
Votre email : ${formData.email}
Votre message : ${formData.msg}`;
alert('Votre message : ' + message);
setFormData({
nom: '',
email: '',
msg: ''
});
}
return(
<form onSubmit={Valider}>
<div>
<label htmlFor="nom">Nom:</label>
<input
type="text"
id="nom"
name="nom"
value={formData.nom}
onChange={Changer}
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value ={formData.email}
onChange={Changer}
/>
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea
id="msg"
name="msg"
value={formData.msg}
onChange={Changer}
/>
</div>
<button type="submit">Envoyer</button>
</form>
)
}
- const [formData, setFormData] = useState({ … }): Ceci utilise le hook useState pour initialiser un état local formData.
- formData contient les données du formulaire (nom, email et message), et setFormData est une fonction pour mettre à jour cet état.
- function Changer(e) { … }: Cette fonction est utilisée pour mettre à jour formData à chaque fois qu’un champ de formulaire est modifié. Elle extrait le nom et la valeur du champ modifié à partir de l’événement e et met à jour formData avec la nouvelle valeur.
- function Valider(e) { … }: Cette fonction est appelée lorsque le formulaire est soumis. Elle empêche le comportement par défaut de l’événement de soumission (rechargement de la page), puis elle crée un message contenant les données saisies dans le formulaire. Ensuite, elle affiche ce message dans une boîte d’alerte et réinitialise les valeurs du formulaire à vide.
Le retour de la fonction Message rend le formulaire JSX. Il comprend des champs pour le nom, l’email et le message, chacun étant lié à l’état local formData via l’attribut value et surveillé par la fonction Changer via l’attribut onChange. Lorsque le formulaire est soumis, la fonction Valider est appelée.
Voilà, passons au test maintenant pour voir si tout fonctionne bien, en lancant la fameuse commande dans le terminal : npm start
Une fois les données envoyées, voici l’alerte.
Voilà, on a terminé notre exercice avec succès .
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En réalisant cet exercice ReactJS, vous avez appris à créer, styliser et valider un formulaire interactif. Grâce aux hooks comme useState, vous maîtrisez désormais la gestion de l’état dans vos composants. Ce projet est une base solide pour explorer des fonctionnalités avancées de React. Continuez à pratiquer pour renforcer vos compétences en ReactJS et améliorer vos projets futurs.
