フォームと制御コンポーネント

React では、フォーム データを効率的に管理するためにフォームと制御されたコンポーネントが不可欠です。制御されたコンポーネントは、入力フィールドの独自の状態を維持せず、代わりに現在の値と変更ハンドラーを小道具として受け取るコンポーネントです。これにより、フォーム データの信頼できる単一の情報源が得られ、管理が容易になります。

制御対象コンポーネントの基本的な例

これは、React 機能コンポーネントで制御コンポーネントを作成する方法の簡単な例です。

import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', formData);
    // Here you can handle form submission (e.g., sending data to an API)
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

説明

1. 状態管理:

   • useState を使用して、入力フィールドの値を保持する formData 状態オブジェクトを作成します。

2. ハンドル変更:

   • handleChange 関数は、ユーザーの入力に基づいて状態を更新します。入力フィールドの name 属性を使用して、formData オブジェクトの正しいプロパティを更新します。

3. 送信を処理します:

   • handleSubmit 関数は、デフォルトのフォーム送信動作を防止し、フォーム データの処理 (サーバーへの送信など) に使用できます。

4. 制御入力:

   • 各入力フィールドの値は React 状態によって制御され、制御されたコンポーネントになります。入力の値 prop は対応する状態値に設定され、onChange イベントによって状態が更新されます。

制御されたコンポーネントの利点

• 単一の信頼できる情報源: フォーム データは単一の状態オブジェクトに保存されるため、管理が簡単になります。
• 検証と書式設定: 検証と書式設定を handleChange 関数で直接簡単に実装できます。
• 動的入力: 制御されたコンポーネントを使用すると、フィールドの追加や削除など、状態に基づいて動的フォームを作成できます。

ヒント

• ユーザー入力を効率的に処理するには、フォーム送信に onSubmit を使用します。
• 入力フィールド用に再利用可能な制御コンポーネントを作成して、コードの重複を減らすことができます。
• より複雑なフォームには、検証や簡単な状態管理などの追加機能を提供する Formik や React Hook Form などのライブラリの使用を検討してください。

さらに例や具体的な実装が必要な場合は、お気軽にお問い合わせください。

以上がフォームと制御コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。