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.
Pengesahan Borang Tradisional 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
Walaupun ini berfungsi, ia melibatkan banyak kod boilerplate dan boleh menyusahkan untuk bentuk yang lebih besar.
Masukkan 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!