Maison > Article > interface Web > Niveau junior : Gérer les formulaires dans React
La gestion des formulaires est un aspect fondamental du développement d'applications React. Ce guide vous aidera à comprendre comment gérer les données de formulaire avec état, utiliser des références pour les composants non contrôlés, effectuer la validation de formulaire et gérer des formulaires complexes, y compris des formulaires en plusieurs étapes et des téléchargements de fichiers.
Les composants contrôlés sont des composants dans lesquels les données du formulaire sont gérées par l'état du composant. Cette approche garantit que le composant React contrôle entièrement les entrées du formulaire, conduisant à un comportement de formulaire plus prévisible et plus gérable.
Pour créer un composant contrôlé, vous devez configurer l'état des données du formulaire et mettre à jour l'état en fonction de la saisie de l'utilisateur.
Exemple :
import React, { useState } from 'react'; const ControlledForm = () => { const [formData, setFormData] = useState({ name: '', email: '' }); const handleChange = (event) => { const { name, value } = event.target; setFormData((prevData) => ({ ...prevData, [name]: value })); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Name: ${formData.name}, Email: ${formData.email}`); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" name="name" value={formData.name} onChange={handleChange} /> </label> <br /> <label> Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <br /> <button type="submit">Submit</button> </form> ); }; export default ControlledForm;
Dans cet exemple, useState est utilisé pour gérer les données du formulaire et la fonction handleChange met à jour l'état chaque fois que l'utilisateur tape dans les champs de saisie.
Les composants non contrôlés sont des composants dans lesquels les données du formulaire sont gérées par le DOM lui-même. Vous utilisez des références pour accéder aux données du formulaire directement à partir des éléments DOM.
Pour créer un composant non contrôlé, vous utilisez le hook useRef pour créer des références pour les éléments du formulaire.
Exemple :
import React, { useRef } from 'react'; const UncontrolledForm = () => { const nameRef = useRef(null); const emailRef = useRef(null); const handleSubmit = (event) => { event.preventDefault(); alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" ref={nameRef} /> </label> <br /> <label> Email: <input type="email" ref={emailRef} /> </label> <br /> <button type="submit">Submit</button> </form> ); }; export default UncontrolledForm;
Dans cet exemple, les références nameRef et emailRef sont utilisées pour accéder aux valeurs d'entrée directement à partir des éléments DOM lorsque le formulaire est soumis.
La validation du formulaire est essentielle pour garantir que la saisie de l'utilisateur répond aux critères requis avant d'être soumise.
Vous pouvez ajouter une validation de base en vérifiant les valeurs d'entrée dans le gestionnaire de soumission du formulaire.
Exemple :
import React, { useState } from 'react'; const BasicValidationForm = () => { const [formData, setFormData] = useState({ name: '', email: '' }); const [errors, setErrors] = useState({}); const handleChange = (event) => { const { name, value } = event.target; setFormData((prevData) => ({ ...prevData, [name]: value })); }; const validate = () => { const newErrors = {}; if (!formData.name) newErrors.name = 'Name is required'; if (!formData.email) newErrors.email = 'Email is required'; return newErrors; }; const handleSubmit = (event) => { event.preventDefault(); const newErrors = validate(); if (Object.keys(newErrors).length > 0) { setErrors(newErrors); } else { alert(`Name: ${formData.name}, Email: ${formData.email}`); } }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" name="name" value={formData.name} onChange={handleChange} /> {errors.name && <span>{errors.name}</span>} </label> <br /> <label> Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /> {errors.email && <span>{errors.email}</span>} </label> <br /> <button type="submit">Submit</button> </form> ); }; export default BasicValidationForm;
Dans cet exemple, la fonction de validation vérifie si les champs nom et email sont vides et définit les messages d'erreur en conséquence.
L'utilisation de bibliothèques tierces comme Formik et Yup peut simplifier la validation des formulaires.
Exemple avec Formik et Yup :
import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const SignupSchema = Yup.object().shape({ name: Yup.string().required('Name is required'), email: Yup.string().email('Invalid email').required('Email is required'), }); const FormikForm = () => ( <div> <h1>Signup Form</h1> <Formik initialValues={{ name: '', email: '' }} validationSchema={SignupSchema} onSubmit={(values) => { alert(JSON.stringify(values, null, 2)); }} > {({ errors, touched }) => ( <Form> <label> Name: <Field name="name" /> <ErrorMessage name="name" component="div" /> </label> <br /> <label> Email: <Field name="email" type="email" /> <ErrorMessage name="email" component="div" /> </label> <br /> <button type="submit">Submit</button> </Form> )} </Formik> </div> ); export default FormikForm;
Dans cet exemple, Formik et Yup sont utilisés pour gérer l'état et la validation du formulaire. Formik fournit un moyen flexible et simple de gérer les formulaires, tandis que Yup aide à définir des schémas de validation.
La gestion des formulaires en plusieurs étapes implique la gestion de l'état du formulaire et la navigation entre les étapes.
Exemple :
import React, { useState } from 'react'; const MultiStepForm = () => { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ name: '', email: '', address: '', }); const nextStep = () => setStep(step + 1); const prevStep = () => setStep(step - 1); const handleChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ ...prevData, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault(); alert(JSON.stringify(formData, null, 2)); }; switch (step) { case 1: return ( <form> <h2>Step 1</h2> <label> Name: <input type="text" name="name" value={formData.name} onChange={handleChange} /> </label> <button type="button" onClick={nextStep}> Next </button> </form> ); case 2: return ( <form> <h2>Step 2</h2> <label> Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <button type="button" onClick={prevStep}> Back </button> <button type="button" onClick={nextStep}> Next </button> </form> ); case 3: return ( <form onSubmit={handleSubmit}> <h2>Step 3</h2> <label> Address: <input type="text" name="address" value={formData.address} onChange={handleChange} /> </label> <button type="button" onClick={prevStep}> Back </button> <button type="submit">Submit</button> </form> ); default: return null; } }; export default MultiStepForm;
Dans cet exemple, l'état du formulaire est géré en plusieurs étapes. Les fonctions nextStep et prevStep gèrent la navigation entre les étapes.
La gestion des téléchargements de fichiers implique l'utilisation d'un élément d'entrée de fichier et
gestion du fichier téléchargé dans l'état du composant.
Exemple :
import React, { useState } from 'react'; const FileUploadForm = () => { const [file, setFile] = useState(null); const handleFileChange = (e) => { setFile(e.target.files[0]); }; const handleSubmit = (e) => { e.preventDefault(); if (file) { alert(`File name: ${file.name}`); } else { alert('No file selected'); } }; return ( <form onSubmit={handleSubmit}> <label> Upload file: <input type="file" onChange={handleFileChange} /> </label> <br /> <button type="submit">Submit</button> </form> ); }; export default FileUploadForm;
Dans cet exemple, la fonction handleFileChange met à jour l'état avec le fichier sélectionné et la fonction handleSubmit gère la soumission du formulaire.
La gestion des formulaires dans React implique la compréhension des composants contrôlés et non contrôlés, la mise en œuvre de la validation des formulaires et la gestion des formulaires complexes. En maîtrisant ces concepts, vous pouvez créer des formulaires robustes et conviviaux dans vos applications React. En tant que développeur junior, acquérir une base solide dans ces domaines vous préparera au succès tout en continuant à apprendre et à grandir en tant que développeur React.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!