Niveau intermédiaire : gestion des formulaires dans React

Les formulaires sont essentiels pour collecter les entrées des utilisateurs dans les applications Web. La gestion des formulaires dans React peut devenir complexe, en particulier lors de la gestion de la validation, des processus en plusieurs étapes et du téléchargement de fichiers. Ce guide approfondit la gestion des formulaires avec état, l'utilisation des références, la mise en œuvre de la validation et la gestion des formulaires complexes.

Composants contrôlés

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 React contrôle entièrement les entrées du formulaire, conduisant à un comportement de formulaire prévisible et gérable.

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

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

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. Vous utilisez des références pour accéder aux données du formulaire directement à partir des éléments DOM.

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;

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 est essentielle pour garantir que la saisie de l'utilisateur répond aux critères requis avant la soumission.

Techniques de validation de base

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.

Bibliothèques tierces pour la validation des formulaires

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.

Gestion des formulaires complexes

Gestion des formulaires en plusieurs étapes

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.

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;

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 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 de niveau intermédiaire, acquérir une base solide dans ces domaines améliorera votre capacité à développer des formulaires plus sophistiqués et plus fiables, faisant de vous un développeur plus efficace et efficient dans l'écosystème 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!