Niveau lead : gestion des formulaires dans React-js tutoriel-php.cn

Lead level: Managing Forms in React

En tant que développeur principal, la gestion des formulaires dans React nécessite non seulement de comprendre les principes fondamentaux, mais également de mettre en œuvre des modèles avancés et les meilleures pratiques pour garantir l'évolutivité, la maintenabilité et les performances. Ce guide complet couvre les composants contrôlés et non contrôlés, la validation des formulaires et les techniques de gestion de formulaires complexes, vous aidant à diriger votre équipe efficacement.

Composants contrôlés

Les composants contrôlés sont des composants React où les données du formulaire sont gérées par l'état du composant. Cette approche offre un contrôle total sur les entrées du formulaire, rendant le comportement du formulaire prévisible et plus facile à gérer.

Gestion des données de formulaire avec l'état

Pour créer un composant contrôlé, initialisez l'état des données du formulaire et mettez à 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;

Copier après la connexion

Dans cet exemple, useState gère les données du formulaire et la fonction handleChange met à jour l'état chaque fois que l'utilisateur tape dans les champs de saisie.

Composants non contrôlés

Les composants non contrôlés s'appuient sur le DOM pour gérer les données du formulaire. Les références sont utilisées pour accéder aux données du formulaire directement à partir des éléments DOM, ce qui peut être utile pour certains cas d'utilisation où un accès immédiat au DOM est requis.

Utiliser des références pour accéder aux données du formulaire

Pour créer un composant non contrôlé, 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;

Copier après la connexion

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.

Validation du formulaire

La validation du formulaire garantit que la saisie de l'utilisateur répond aux critères requis avant la soumission. Une validation appropriée améliore l'expérience utilisateur et empêche le traitement de données erronées.

Techniques de validation de base

La validation de base consiste à vérifier les valeurs d'entrée dans le gestionnaire de soumission du formulaire et à afficher les messages d'erreur appropriés.

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;

Copier après la connexion

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.

Bibliothèques tierces pour la validation des formulaires

L'utilisation de bibliothèques tierces comme Formik et Yup peut simplifier la validation du formulaire et le rendre plus maintenable.

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));
      }}
    >
      {() => (
        <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;

Copier après la connexion

Dans cet exemple, Formik et Yup gèrent l'état et la validation du formulaire. Formik offre un moyen flexible de gérer les formulaires, tandis que Yup aide à définir des schémas de validation.

Gestion des formulaires complexes

Gestion des formulaires en plusieurs étapes

Les formulaires en plusieurs étapes impliquent la gestion de l'état et de la navigation sur plusieurs étapes, ce qui rend souvent le processus de remplissage du formulaire plus facile et plus convivial.

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;

Copier après la connexion

Dans cet exemple, l'état du formulaire est géré en plusieurs étapes. La `prochaine Étape

Les fonctions

et prevStep` gèrent la navigation entre les étapes.

Gestion des téléchargements de fichiers dans les formulaires

La gestion des téléchargements de fichiers implique l'utilisation d'un élément d'entrée de fichier et la 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;

Copier après la connexion

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.

Conclusion

La gestion des formulaires dans React implique de comprendre et d'implémenter des composants contrôlés et non contrôlés, d'effectuer la validation des formulaires et de gérer des formulaires complexes tels que des formulaires en plusieurs étapes et des téléchargements de fichiers. En maîtrisant ces concepts, vous pouvez créer des formulaires robustes, maintenables et conviviaux dans vos applications React. En tant que développeur principal, votre capacité à gérer efficacement les formulaires améliorera la productivité de votre équipe et contribuera à la qualité globale de vos applications, en garantissant que les meilleures pratiques sont suivies et que des normes élevées sont maintenues tout au long du processus de développement.

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!