Mempermudahkan Pengesahan Borang: React Hook Form vs Traditional Methods

Pengesahan borang ialah aspek penting dalam pembangunan web, memastikan integriti data dan meningkatkan pengalaman pengguna. Dalam ekosistem React, kami telah melihat evolusi yang ketara dalam cara kami mengendalikan borang dan pengesahannya.

• Dalam blog ini, kami akan membandingkan dua pendekatan: pengesahan borang tradisional dan perpustakaan React Hook Form moden.
• Dengan meneliti kaedah ini secara bersebelahan, kami akan mengetahui sebab React Hook Form telah menjadi penyelesaian utama untuk banyak pembangun.

Pengesahan Borang Tradisional dalam React

• Mari kita mulakan dengan melihat pendekatan tradisional untuk membentuk pengesahan dalam 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>
  );
};

Dalam pendekatan tradisional ini

• Kami menguruskan keadaan borang dan keadaan ralat secara berasingan menggunakan cangkuk useState.
• Kami mengendalikan perubahan pada medan borang secara manual dan melaksanakan logik pengesahan tersuai dalam fungsi handleSubmit.

Walaupun ini berfungsi, ia melibatkan banyak kod boilerplate dan boleh menyusahkan untuk bentuk yang lebih besar.

Masukkan React Hook Form

• Sekarang, mari lihat bagaimana kita boleh mencapai hasil yang sama menggunakan React Hook Form:

Pemasangan

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>
  );
};

Kesederhanaan Bentuk Cangkuk Reaksi

• Pelat Dandang Dikurangkan: Borang Cangkuk Reaksi menghapuskan keperluan untuk pengurusan keadaan manual. Tiada lagi useState untuk data borang dan ralat.

• Pengesahan Deklaratif: Daripada menulis logik pengesahan penting, kami mengisytiharkan peraturan pengesahan kami betul-betul dalam fungsi daftar. Ini menjadikan kod lebih mudah dibaca dan diselenggara.

• Pengendalian Ralat Automatik: React Hook Form menjejaki ralat secara automatik dan menyediakannya melalui objek ralat, menghapuskan keperluan untuk pengurusan keadaan ralat manual.

• Prestasi: Dengan memanfaatkan komponen yang tidak terkawal, React Hook Form meminimumkan pemaparan semula, membawa kepada prestasi yang lebih baik, terutamanya untuk bentuk besar.

• Penyatuan Mudah: Fungsi daftar disepadukan dengan lancar dengan elemen input sedia ada anda, memerlukan perubahan minimum pada JSX anda.

• Pengesahan Terbina dalam: Peraturan pengesahan biasa seperti yang diperlukan, min, maks, corak terbina dalam, mengurangkan keperluan untuk fungsi pengesahan tersuai.

• Sokongan TypeScript: React Hook Form menyediakan sokongan TypeScript yang sangat baik di luar kotak, meningkatkan keselamatan jenis dalam borang anda.

Untuk memahami cara mengendalikan react-hook-form dalam skrip taip dengan lebih banyak fail input

• Walaupun pengendalian bentuk tradisional dalam React memberikan anda kawalan yang terperinci, ia selalunya membawa kepada kod verbose yang sukar untuk dikekalkan.

• Borang React Hook memudahkan proses ini dengan ketara, menyediakan cara yang lebih deklaratif dan cekap untuk mengendalikan borang dan pengesahannya.

Terima kasih kerana membaca... harap anda belajar sesuatu yang baharu hari ini :)

Atas ialah kandungan terperinci Mempermudahkan Pengesahan Borang: React Hook Form vs Traditional Methods. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!