Niveau stagiaire : 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 être simple une fois que vous comprenez les bases des composants contrôlés et non contrôlés, de la validation des formulaires et de la gestion des formulaires complexes. Ce guide vous aidera à démarrer avec la gestion des formulaires dans React.

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. Cela signifie que les valeurs d'entrée sont contrôlées par React.

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

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 [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

Dans cet exemple, les entrées du formulaire sont contrôlées par les variables d'état du nom et de l'e-mail. Le gestionnaire d'événements onChange 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 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.

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

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.

Validation du formulaire

La validation du formulaire est essentielle pour garantir que la saisie de l'utilisateur répond aux critères requis avant d'être soumise.

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 [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!name) newErrors.name = 'Name is required';
    if (!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: ${name}, Email: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {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) => {
    setFormData({ ...formData, [e.target.name]: e.target.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 stagiaire, 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!