フォーム検証の簡素化: React フック フォームと従来の方法

フォーム検証は Web 開発の重要な側面であり、データの整合性を確保し、ユーザー エクスペリエンスを向上させます。 React エコシステムでは、フォームとその検証の処理方法が大幅に進化しました。

• このブログでは、従来のフォーム検証と最新の React Hook Form ライブラリという 2 つのアプローチを比較します。
• これらのメソッドを並べて調べることで、React Hook Form が多くの開発者にとって頼りになるソリューションになっている理由がわかります。

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

この伝統的なアプローチでは

• useState フックを使用して、フォームの状態とエラーの状態を個別に管理します。
• フォームフィールドへの変更を手動で処理し、handleSubmit 関数にカスタム検証ロジックを実装します。

これは機能しますが、多くの定型コードが含まれるため、大きなフォームでは煩雑になる可能性があります。

React フック フォームに入力してください

• 次に、React Hook Form を使用して同じ結果を達成する方法を見てみましょう:

インストール

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 サイトの他の関連記事を参照してください。