Simplifier la validation des formulaires : formulaire React Hook par rapport aux méthodes traditionnelles

La validation des formulaires est un aspect crucial du développement Web, garantissant l'intégrité des données et améliorant l'expérience utilisateur. Dans l'écosystème React, nous avons constaté une évolution significative dans la façon dont nous traitons les formulaires et leur validation.

• Dans ce blog, nous comparerons deux approches : la validation de formulaire traditionnelle et la bibliothèque moderne React Hook Form.
• En examinant ces méthodes côte à côte, nous découvrirons pourquoi React Hook Form est devenu une solution incontournable pour de nombreux développeurs.

Validation de formulaire traditionnelle dans React

• Commençons par examiner une approche traditionnelle de validation de formulaire dans React :

import React, { useState } from "react";

const SimpleForm = () => {

  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    // ... other fields
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    const newErrors = {};

    // Validation logic
    if (!formData.firstName) newErrors.firstName = "First Name is Required";

    if (!formData.lastName) newErrors.lastName = "Last Name is Required";

    if (!formData.email.match(/^\S+@\S+$/i)) newErrors.email = "Invalid email address";

    if (!formData.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)) newErrors.password = "Invalid password";

    // ... more validation rules

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    } finally {
      setIsSubmitting(false)
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
      />
      {errors.firstName && <p>{errors.firstName}</p>}

      <input
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
      />
      {errors.lastName && <p>{errors.lastName}</p>}      

      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <p>{errors.email}</p>}


      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      {errors.password && <p>{errors.password}</p>}

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};

Dans cette approche traditionnelle

• Nous gérons l’état du formulaire et l’état d’erreur séparément à l’aide du hook useState.
• Nous traitons manuellement les modifications apportées aux champs du formulaire et implémentons une logique de validation personnalisée dans la fonction handleSubmit.

Bien que cela fonctionne, cela implique beaucoup de code passe-partout et peut devenir fastidieux pour les formulaires plus volumineux.

Entrez le formulaire React Hook

• Voyons maintenant comment nous pouvons obtenir le même résultat en utilisant React Hook Form :

Installation

npm install react-hook-form

import React from "react";

// useForm is the hook which is given by react-hook-form
import { useForm } from "react-hook-form";

const ReactHookForm = () => {

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", { required: "First Name is required" 
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input
        {...register("lastName", { required: "Last Name is required" 
        })}
      />

      {errors.lasttName && <p>{errors.lasttName.message}</p>}      

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email address" }
        })}
      />

      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { required: "First Name is required",
         pattern: { value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, message: "Invalid password"}
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}      

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>

    </form>
  );
};

La simplicité du formulaire React Hook

• Plaque passe-partout réduit : React Hook Form élimine le besoin d'une gestion manuelle de l'état. Plus besoin d'utiliser State pour les données et les erreurs du formulaire.

• Validation déclarative : au lieu d'écrire une logique de validation impérative, nous déclarons nos règles de validation directement dans la fonction de registre. Cela rend le code plus lisible et maintenable.

• Gestion automatique des erreurs : React Hook Form suit automatiquement les erreurs et les fournit via l'objet erreurs, éliminant ainsi le besoin d'une gestion manuelle de l'état des erreurs.

• Performances : en exploitant des composants non contrôlés, React Hook Form minimise les nouveaux rendus, conduisant à de meilleures performances, en particulier pour les formulaires volumineux.

• Intégration facile : la fonction d'enregistrement s'intègre de manière transparente à vos éléments d'entrée existants, nécessitant des modifications minimes dans votre JSX.

• Validation intégrée : les règles de validation courantes telles que requis, min, max et modèle sont intégrées, réduisant ainsi le besoin de fonctions de validation personnalisées.

• Prise en charge de TypeScript : React Hook Form fournit une excellente prise en charge de TypeScript prête à l'emploi, améliorant ainsi la sécurité des types dans vos formulaires.

Pour comprendre comment gérer le formulaire de réaction-hook en dactylographié avec plus de champs d'entrée

• Bien que la gestion traditionnelle des formulaires dans React vous donne un contrôle précis, elle conduit souvent à un code verbeux qui peut être difficile à maintenir.

• React Hook Form simplifie considérablement ce processus, en offrant un moyen plus déclaratif et efficace de gérer les formulaires et leur validation.

Merci d'avoir lu... j'espère que vous avez appris quelque chose de nouveau aujourd'hui :)

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!