Contrôle ReactJS : Maîtrisez la Gestion des Formulaires

L'Équipe Alphorm
L'Équipe Alphorm 25e lecture en min

Dans notre précédent article sur la gestion des données en ReactJS, nous avons exploré comment manipuler et afficher efficacement les données. Le contrôle ReactJS est tout aussi crucial pour développer des applications web modernes. Que ce soit pour des formulaires simples ou complexes, maîtriser le contrôle des différents types d’inputs en ReactJS améliore l’expérience utilisateur et la robustesse de votre application. Dans cet article, nous explorerons comment contrôler les inputs, textarea, select, checkbox et boutons radio en ReactJS avec des exemples pratiques. Préparez-vous à approfondir vos compétences en contrôle ReactJS et optimiser vos formulaires pour des performances accrues.

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.

Illustration du contrôle des inputs en ReactJS avec la balise Formulaire

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 :

Utilisation de la balise Formulaire pour contrôler les formulaires en ReactJS

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 :

Résultat après l'intégration de plusieurs champs dans ReactJS

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 :

 

Résultat visible après l'exécution de l'extrait de code

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 :

Illustration du formulaire avec un textarea

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
				
			
Visualisation du résultat après le codage d'un textarea en ReactJS

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 :

Exemple de contrôle select à 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 :

Trois options définies dans le menu déroulant : Paris, Marseille et Paris

Excellent, nous parvenons à implémenter le contrôle du menu déroulant (select) en utilisant les fonctionnalités de ReactJS.

Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

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 :

Illustration des cases à cocher en ReactJS

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.
  • formCheck est 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 :
Visualisation des résultats des fonctions utilisées dans un formulaire ReactJS

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.

 

Gestion de multiples cases à cocher dans une implémentation ReactJS

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 :

 

Vérification du bon fonctionnement des composants dans une application ReactJS

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.

 

Illustration de l'objectif souhaité pour une application développée en ReactJS

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 :

 

Exécution d'un formulaire en ReactJS

On a terminé avec succès notre objectifs sur cette partie, super cool.

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.

 

Affichage du résultat après l'implémentation des fonctionnalités

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 :

Illustration de l'exercice à travailler ensemble pour apprendre ReactJS

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
				
			
Établissement des fondations pour un projet développé en ReactJS

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 :

Vérification de la progression dans le développement d'une application ReactJS

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

Vérification de la progression dans le développement d'une application ReactJS

Une fois les données envoyées, voici l’alerte.

Affichage d'une alerte dans une application développée en ReactJS

Voilà, on a terminé notre exercice avec succès .

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. 

 

 
 
 
 
ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.