Niveau architecte : gestion des formulaires dans React

La gestion des formulaires dans React est un aspect essentiel de la création d'applications sophistiquées et conviviales. En tant que développeur de niveau architecte, il est essentiel non seulement de comprendre, mais également de concevoir les meilleures pratiques et modèles qui garantissent que les formulaires sont évolutifs, maintenables et performants. Cet article couvre les composants contrôlés et non contrôlés, la validation des formulaires et les techniques de gestion de formulaires complexes, fournissant un guide complet pour la gestion des formulaires dans React au niveau architectural.

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 méthode offre un contrôle total sur les entrées du formulaire, rendant le comportement du formulaire plus prévisible et plus facile à déboguer.

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

Les composants contrôlés mettent à jour l'état à chaque changement d'entrée. Cette approche garantit que l'état reflète toujours les valeurs d'entrée actuelles.

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. À l'aide de refs, vous pouvez accéder aux données du formulaire directement à partir des éléments DOM. Cette approche est utile lorsqu'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;

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 cruciale pour garantir que la saisie de l'utilisateur répond aux critères requis avant la soumission. La mise en œuvre d'une validation robuste améliore l'expérience utilisateur et empêche le traitement des données non valides.

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;

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;

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;

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 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 de niveau architecte, votre capacité à concevoir et à appliquer les meilleures pratiques en matière de gestion de formulaires améliorera considérablement la productivité de votre équipe et la qualité globale de vos applications, garantissant ainsi le maintien de normes élevées 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!