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

Niveau senior : gestion des formulaires dans React

王林

Libérer： 2024-07-17 21:14:48

original

828 Les gens l'ont consulté

Senior level: Managing Forms in React

La gestion des formulaires dans React peut devenir complexe, en particulier lorsqu'il s'agit de scénarios avancés tels que des formulaires en plusieurs étapes, des téléchargements de fichiers et une logique de validation complexe. Ce guide fournit un examen approfondi des composants contrôlés et non contrôlés, de la validation des formulaires et de la gestion des formulaires complexes, vous aidant à créer une gestion des formulaires robuste et maintenable dans vos applications React.

Composants contrôlés

Les composants contrôlés dans React sont des composants dans lesquels les données du formulaire sont gérées par l'état du composant. Cette approche garantit que React a un contrôle total sur les entrées du formulaire, rendant le comportement du formulaire plus 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. 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;

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. Le nextStep et `prevStep

Les fonctions

` 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 senior, votre capacité à gérer efficacement les formulaires améliorera votre productivité et contribuera à la qualité globale de vos applications.

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!