Gérer plusieurs contrôles de formulaire en ReactJS peut rapidement devenir complexe, entraînant des bugs et des comportements inattendus.
Ces complications augmentent la frustration des développeurs et affectent l’expérience utilisateur. Un formulaire mal géré peut nuire à la performance de l’application.
Cet article vous guide sur la gestion des inputs, checkboxes, radios, et autres éléments en ReactJS. Découvrez comment simplifier la gestion des états de vos composants pour des formulaires plus fluides et des applications robustes.
Contrôler un input en ReactJS
Donc , pour commencer sur cette partie, nous allons commencer par le contrôle d’un input.
Contrôler un input en React consiste à gérer et à synchroniser l’état de l’input avec celui de l’application. Plutôt que de laisser le DOM gérer l’état de l’input, React propose d’utiliser un état local (useState) pour stocker la valeur de l’input. Cela permet à l’application de garder une trace de ce qui est saisi dans l’input et de réagir en conséquence aux changements. En contrôlant l’input, on peut effectuer des validations en temps réel, des transformations ou des actions en réponse aux modifications de la valeur saisie. Pour vous permettre d’approfondir votre compréhension des concepts que nous avons abordés, je vais illustrer cela avec l’image ci-dessous.
D’accord, nous avons déjà un champ de saisie, et la valeur de cet input sera immédiatement affichée en dessous. Je suppose que vous avez une idée de comment procéder, mais nous allons le faire ensemble.
Pour le faire, rendez-vous dans le dossier src/component/formulaire.js
import React, { useState } from "react";
export default function Formulaire(){
const [valueName, setValueName] = useState('Elon Musk');
const changer = (e) => {
setValueName(e.target.value);
}
return(
<>
<form>
<label htmlFor="nom">Nom:</label>
<input
type="text"
id="nom"
value={valueName}
onChange={changer}
/><br/><br/>
<input
type="submit"
value= 'Valider'
onClick={(e)=>{
e.preventDefault();
}}
/>
</form>
<div>
<p>Votre nom est : {valueName}</p>
</div>
</>
);
}
- import React, { useState } from « react »: Cette ligne importe les fonctionnalités nécessaires depuis la bibliothèque React, notamment la fonction useState pour gérer l’état local des composants.
- const [valueName, setValueName] = useState(‘Elon Musk’): Ici, nous utilisons le hook d’état useState pour déclarer une variable d’état appelée valueName, qui sera utilisée pour stocker la valeur de l’input. La valeur initiale est définie sur ‘Elon Musk’, mais elle peut être modifiée par la suite.
- const changer = (e) => { setValueName(e.target.value); }: Cette fonction changer est définie pour mettre à jour l’état valueName en fonction de la valeur saisie dans l’input. Elle est appelée à chaque fois que l’utilisateur modifie le contenu de l’input.
Dans la fonction de rendu, un formulaire est rendu avec un champ de saisie pour le nom et un bouton de validation. L’attribut value de l’input est lié à valueName, donc la valeur de l’input sera toujours synchronisée avec valueName.
Lorsque l’utilisateur saisit du texte dans l’input, la fonction changer est déclenchée par l’événement onChange, mettant à jour l’état valueName avec la nouvelle valeur saisie.
Le bouton de validation a un gestionnaire d’événements onClick qui empêche le comportement par défaut du formulaire à l’aide de e.preventDefault(). Cela empêche la page de se recharger lorsque le bouton est cliqué, ce qui est souvent le comportement par défaut d’un bouton dans un formulaire.
Et pour que le composant soit fonctionnel. N’oubliez pas l’importer dans le fichier index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Formulaire from './component/formulaire';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Formulaire/>
</React.StrictMode>
);
Nous venons d’importer notre composant, puis nous l’avons appelé en utilisant la balise <Formulaire>.
En démarrant votre projet, cela va nous donner quelque chose comme ça :
Vous avez la liberté de saisir le nom de votre choix, et celui-ci sera toujours affiché dans la boîte située en dessous.
Contrôler plusieurs inputs en ReactJS
Le principe demeure similaire à ce que nous venons d’expliquer, mais cette fois-ci, il concerne la gestion de plusieurs champs de saisie comme ceci :
Donc pour le faire, examinons la modification au niveau de notre composant Formulaire : src/component/formulaire.js.
import { useState } from "react";
export default function Formulaire(){
const [formData,setFormData] = useState(
{
nom:'Elon musk',
email:'elon@gmail.com',
}
);
const changer = (e)=>{
let name = e.target.name
let value = e.target.value
setFormData((datas) =>({
...datas ,
[name]:value
}))
}
return(
<>
<form >
<label>Nom:</label>
<input
type="text"
id="nom"
name = 'nom'
value={formData.nom}
onChange={changer}
></input><br/><br/>
<label>Votre email:</label>
<input
type="text"
id="email"
name = 'email'
value={formData.email}
onChange={changer}
></input><br/><br/>
<input
type="submit"
value= 'Envoyer'
onClick={(e)=>{
e.preventDefault()
}}
></input>
</form>
<div>
<p>votre nom est : {formData.nom}</p>
<p>votre email est : {formData.email}</p>
</div>
</>
)
}
const [formData, setFormData] = useState({nom:'Elon Musk', email:'elon@gmail.com'}): Ici, nous utilisons le hook d’état useState pour déclarer une variable d’état appelée formData, qui contient les données du formulaire. Au départ, les valeurs initiales pour les champs nom et email sont définies.
La fonction changer est définie pour mettre à jour l’état formData (comme on a déjà expliqué dans le chapitre précédent) lorsqu’un champ de saisie est modifié. Elle récupère le nom et la valeur du champ de saisie modifié, puis utilise la fonction setFormData pour mettre à jour l’état en fusionnant les nouvelles données avec les données existantes à l’aide de la syntaxe de décomposition (…datas) et en remplaçant la valeur du champ modifié.
Dans le rendu du composant, un formulaire est rendu avec deux champs de saisie : un pour le nom et un pour l’e-mail. Les valeurs de ces champs sont liées à formData.nom et formData.email, respectivement, afin que les valeurs des champs soient toujours synchronisées avec l’état formData.
Lorsque l’utilisateur modifie un champ de saisie, la fonction changer est déclenchée par l’événement onChange, ce qui met à jour l’état formData avec les nouvelles valeurs saisies.
Cet extrait de code nous donne comme ceci en lançant notre projet :
Voilà, parfait on a obtenu ce que nous avons attendu.
Contrôler un textarea en ReactJS
Dans cette nous aborderons la manière de contrôler un textarea en ReactJS. Contrôler un textarea signifie que sa valeur est gérée par React via l’état du composant plutôt que de laisser le DOM gérer sa propre valeur. Cela permet un contrôle plus précis et facilite la manipulation et la validation des données utilisateur.
Nous explorerons les méthodes pour réaliser cela efficacement tout en maintenant la réactivité et la cohérence de l’interface utilisateur.
Imaginons dans votre projet, on vous demande coder un formulaire pour le textarea comme ceci en reactjs :
Vous semblez trouver cela étrange, car il a spécifiquement mentionné l’utilisation de ReactJS plutôt que JavaScript seul. Ne vous inquiétez pas, vous allez bientôt le maîtriser. Maintenant, examinons le composant pour voir comment l’implémenter : src/component/formulaire.js
import { useState } from "react";
export default function Formulaire(){
const [formmsg,setFormmsg] = useState('Bonjour');
const changer = (e)=>{
setFormmsg(e.target.value);
}
return(
<>
<form >
<label>votre message:</label>
<textarea
id="msg"
name="msg"
value={formmsg}
onChange={changer}
></textarea>
</form>
<div>
<p>votre message est : {formmsg}</p>
</div>
</>
)
}
Comme vous comprenez déjà, import { useState } from « react »: Cette ligne importe la fonction useState depuis la bibliothèque React, qui est utilisée pour déclarer un état local dans un composant fonctionnel.
- const [formmsg, setFormmsg] = useState(‘Bonjour’): Ici, un état local est déclaré en utilisant useState.
- formmsg est initialisé avec la valeur ‘Bonjour’ et setFormmsg est une fonction qui sera utilisée pour mettre à jour la valeur de formmsg.
Dans la partie du rendu (return(…)), un formulaire contenant un champ de texte (textarea) est rendu.
Le textarea a un id, un name, une valeur (value) liée à formmsg, et une fonction de rappel (onChange) pour appeler changer lorsque la valeur du champ de texte change.
<div>...</div>: En dehors du formulaire, un <div> est utilisé pour afficher le message saisi à côté du champ de texte.
{formmsg}: Cette expression est utilisée à l’intérieur du paragraphe pour afficher la valeur actuelle de formmsg. Voilà tout semble compréhensible.
Pour voir le résultat, taper la fameuse commande :
npm start
Voilà, il nous affiche bien notre message, parfait.
Contrôler un select
Dans cette section de cours, nous aborderons la manière de contrôler un élément <select> en utilisant React. Contrôler un <select> en React implique de gérer son état et ses options de manière à ce que les changements effectués par l’utilisateur soient pris en compte et reflétés dans l’interface utilisateur de manière cohérente.
Voilà un exemple de contrôle select que nous ressayons d’implémenter en reactjs :
Lorsque vous sélectionnez votre ville, cela entraîne instantanément l’affichage des informations correspondantes ci-dessous.
Pour ce faire, voyons la modification dans notre composant formulaire : src/component/formulaire.js
import { useState } from "react";
export default function Formulaire(){
const [formville,setFormville] = useState('Paris');
const changer = (e)=>{
setFormville(e.target.value);
}
return(
<>
<form >
<p>Quelle est votre ville?</p>
<select
value={formville}
onChange={changer}
>
<option value="Paris">Paris</option>
<option value="Marseille">Marseille</option>
<option value="Paris">Paris</option>
</select>
</form>
<div>
<p>votre ville est : {formville}</p>
</div>
</>
)
}
const [formville, setFormville] = useState('Paris');: Un état local est déclaré à l’aide de useState. formville est initialisé avec la valeur ‘Paris’ et setFormville est une fonction utilisée pour mettre à jour la valeur de formville.
Dans la partie de rendu (return(...)), un formulaire contenant un menu déroulant (<select>) est rendu.
Le <select> a une valeur (value) liée à formville, et une fonction de rappel (onChange) pour appeler changer lorsqu’une nouvelle option est sélectionnée.
Trois options sont définies dans le menu déroulant : Paris, Marseille et Paris.
Apres avoir lancer d’application, cela nous donne :
Excellent, nous parvenons à implémenter le contrôle du menu déroulant (select) en utilisant les fonctionnalités de ReactJS.
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Contrôler une checkbox
Maintenant, nous allons explorer comment contrôler une case à cocher (checkbox) en utilisant ReactJS. Bien que le concept reste similaire à celui que nous avons appris précédemment pour contrôler les menus déroulants, cette fois-ci, nous nous concentrons sur les cases à cocher.
Voilà une photo qui montre ce que nous allons développer su cette partie :
Comme vous voyez, un message est apparu si l’utilisateur coche la cache.
Pour le faire, rendez-vous dans le composant : src/component/formulaire.js
import { useState } from "react";
export default function Formulaire(){
const [formCheck,setFormCheck] = useState(false);
const changer = (e)=>{
setFormCheck(e.target.checked);
}
return(
<>
<form >
<input
type="checkbox"
checked = {formCheck}
id="mailing"
onChange={changer}
></input>
<label htmlFor="mailing">s'incrire à la mailing</label>
</form>
<div>
{
(formCheck)? <p>Accepté</p> :''
}
</div>
</>
)
}
const [formCheck, setFormCheck] = useState(false);:Un état local est déclaré à l’aide de useState.formCheckest initialisé avec la valeur false (la case à cocher n’est pas cochée) et setFormCheck est une fonction utilisée pour mettre à jour la valeur de formCheck.const changer = (e) => { setFormCheck(e.target.checked); }:Cette fonction changer est définie pour mettre à jour l’état formCheck en fonction de la propriété checked de la case à cocher. Elle est appelée à chaque changement d’état grâce à l’événement onChange.- L’élément
<input>de type « checkbox » a sa propriété checked liée à formCheck, ce qui signifie que la case à cocher sera cochée si formCheck est vrai et décochée sinon. Le onChange est utilisé pour appeler changer lorsqu’il y a un changement d’état de la case à cocher. <div>...</div>:En dehors du formulaire, un <div> est utilisé pour afficher le statut d’acceptation de l’utilisateur.{ (formCheck) ? <p>Accepté</p> : ' ' }:Cette expression conditionnelle affiche le texte « Accepté » sous forme de paragraphe lorsque formCheck est vrai (la case à cocher est cochée), sinon elle affiche une chaîne vide. Tout cela nous donne un résultat comme ceci :
Nous avons élaboré avec succès notre objectif.
Contrôler plusieurs checkboxs en ReactJS
Maintenant, on continue toujours avec le contrôler checkbox mais pour élaborer notre compétence et notre compréhension, nous aborderons la gestion de multiples cases à cocher (checkboxes) en utilisant ReactJS.
Nous appliquerons une approche similaire à celle utilisée précédemment, mais cette fois-ci pour gérer plusieurs cases à cocher. Nous aborderons la gestion de multiples cases à cocher dans le cadre de notre implémentation.
Comme vous avez pu le constater, l’utilisateur a la possibilité de sélectionner plusieurs langues parlées, et les valeurs sélectionnées sont immédiatement affichées en temps réel. À présent, nous allons mettre à jour notre composant pour intégrer cette pratique recommandée.
src/component/formulaire.js.
import { useState } from "react";
export default function Formulaire(){
const [formCheck,setFormCheck] = useState(['Arabe']);
const changer = (e)=>{
let checked = e.target.checked;
let value = e.target.value;
if(checked){
setFormCheck([...formCheck,value]);
}else{
setFormCheck(formCheck.filter((verification) => verification!== value));
}
}
return(
<>
<form >
<p>votre langue</p>
<input
type="checkbox"
id="arabe"
value='Arabe'
defaultChecked
onChange={changer}></input>
<label htmlFor="">Arabe</label><br></br>
<input
type="checkbox"
id="francais"
value='Francais'
onChange={changer}></input>
<label htmlFor="">Francais</label><br></br>
<input
type="checkbox"
id="anglais"
value='Anglais'
onChange={changer}></input>
<label htmlFor="">Anglais</label><br></br>
</form>
<div>
<p>Mes langues parlées sont : {formCheck.join(',')}</p>
</div>
</>
)
}
const [formCheck, setFormCheck] = useState(['Arabe']): Cette ligne déclare un état local formCheck qui contiendra les langues sélectionnées par l’utilisateur. La valeur initiale est définie comme un tableau contenant ‘Arabe’.- setFormCheck est une fonction qui sera utilisée pour mettre à jour cet état.
const changer = (e) => { ... }:Cette fonction est appelée à chaque fois que l’état d’une case à cocher change. Elle récupère l’événement e et met à jour l’état formCheck en fonction de la valeur de la case cochée.
Dans le retour (return), le composant renvoie un formulaire contenant des cases à cocher pour les langues. Chaque case à cocher a un identifiant unique (id), une valeur (value) correspondant à la langue, et une fonction onChange qui appelle changer lorsqu’elle est cochée ou décochée.
La balise <div> en dehors du formulaire affiche les langues sélectionnées par l’utilisateur à l’aide de la méthode join(','), qui joint les éléments du tableau formCheck en une chaîne de caractères séparée par des virgules.
Pour prouver que tout fonctionne bien sans erreur, voyons le résultat maintenant en tapant la commande : npm start pour démarrer le projet :
Tout fonctionne bien et on a bien développé notre objectif avec succès.
Contrôler plusieurs boutons radio en ReactJS
Dans cette partie, nous allons explorer la manière de contrôler plusieurs boutons radio en utilisant React. Les boutons radio offrent une sélection exclusive parmi plusieurs options, et nous découvrirons comment gérer leur état et leur comportement dans un composant React.
Je vous présente notre objectif dans cette section afin de vous fournir une compréhension approfondie.
Nous avons actuellement deux options, et le choix de l’utilisateur est capturé et affiché en temps réel. Avez-vous une idée de comment le réaliser en ReactJS ? »
Passons maintenant au code dans notre composant : src/component/formulaire.js
import { useState } from "react";
export default function Formulaire(){
const [formRadio,setFormRadio] = useState('Non');
const changer = (e)=>{
setFormRadio(e.target.value);
}
return(
<>
<form >
<p>Cette formation reactjs est bonne?</p>
<input
type="radio"
id="oui"
name="react"
value= "Oui"
onChange={changer}
></input>
<label htmlFor="oui">Oui</label><br></br>
<input
type="radio"
id="non"
name="react"
value="Non"
checked = {formRadio == 'Non'}
onChange={changer}
></input>
<label htmlFor="non">Non</label><br></br>
</form>
<div>
<p>Votre avis: {formRadio} </p>
</div>
</>
)
}
const [formRadio, setFormRadio] = useState('Non'):Cette ligne déclare un état local formRadio qui contient la valeur sélectionnée par défaut pour les boutons radio, ici ‘Non’.- setFormRadio est une fonction qui sera utilisée pour mettre à jour cet état.
const changer = (e) => { setFormRadio(e.target.value); }:Cette fonction est appelée à chaque fois que l’utilisateur sélectionne un bouton radio. Elle récupère la valeur sélectionnée de l’événement e et met à jour l’état formRadio en conséquence.
Dans le retour (return), le composant renvoie un formulaire contenant deux boutons radio. Chaque bouton radio a un identifiant unique (id), un nom (name) pour les regrouper, une valeur (value) correspondant à la réponse, et une fonction onChange qui appelle changer lorsqu’il est sélectionné.
La deuxième balise <input> a également un attribut checked qui est conditionnellement défini en fonction de l’état formRadio. Cela permet de cocher automatiquement le bouton radio correspondant à la valeur actuelle de formRadio.
La balise <div> affiche le choix de l’utilisateur en temps réel à l’aide de l’état formRadio.
Tout cela nous donne un résultat comme ceci :
On a terminé avec succès notre objectifs sur cette partie, super cool.
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
Maîtriser le contrôle ReactJS permet de créer des applications web dynamiques et interactives. De la gestion des formulaires complexes à la validation des entrées, ReactJS offre des outils puissants pour simplifier ces tâches.
Nous espérons que cet article vous a fourni des bases solides et des techniques pratiques pour améliorer vos projets. Continuez à explorer le contrôle ReactJS pour offrir des expériences utilisateur exceptionnelles. Et par la suite nous allons traiter le volet de navigation des liens ReactJS.
