フォーム検証は Web 開発の重要な側面であり、データの整合性を確保し、ユーザー エクスペリエンスを向上させます。 React エコシステムでは、フォームとその検証の処理方法が大幅に進化しました。
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> ); };
この伝統的なアプローチでは
これは機能しますが、多くの定型コードが含まれるため、大きなフォームでは煩雑になる可能性があります。
React フック フォームに入力してください
インストール
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> ); };
React フック形式のシンプルさ
定型文の削減: React Hook Form により、手動による状態管理の必要がなくなります。フォーム データとエラーに useState を使用する必要はなくなりました。
宣言的検証: 命令的検証ロジックを記述する代わりに、検証ルールを register 関数内で直接宣言します。これにより、コードが読みやすく、保守しやすくなります。
自動エラー処理: React Hook Form は自動的にエラーを追跡し、エラー オブジェクトを通じてエラーを提供するため、手動でエラー状態を管理する必要がなくなります。
パフォーマンス: 制御されていないコンポーネントを活用することで、React Hook Form は再レンダリングを最小限に抑え、特に大きなフォームのパフォーマンスの向上につながります。
簡単な統合: register 関数は既存の入力要素とシームレスに統合され、JSX への変更は最小限で済みます。
組み込み検証: required、min、max、pattern などの一般的な検証ルールが組み込まれているため、カスタム検証関数の必要性が軽減されます。
TypeScript サポート: React Hook Form はすぐに使える優れた TypeScript サポートを提供し、フォームのタイプ セーフティを強化します。
より多くの入力フィールドを使用して TypeScript で React-Hook-form を処理する方法を理解するには
React での従来のフォーム処理ではきめ細かい制御が可能ですが、多くの場合、保守が困難な冗長なコードが生成されます。
React Hook Form はこのプロセスを大幅に簡素化し、フォームとその検証をより宣言的かつ効率的に処理する方法を提供します。
読んでいただきありがとうございます...今日何か新しいことを学べたことを願っています :)
以上がフォーム検証の簡素化: React フック フォームと従来の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。