React Forms - 複数の入力フィールド

1. 複数の入力フィールドの処理

フォーム内に複数の制御コンポーネント（Controlled Input Fields）がある場合、そのステート管理には以下の2つのアプローチがあります。

1. 各入力項目に対して個別に useState を呼び出す。
2. 1つの useState を呼び出し、オブジェクトを使用してすべてのフィールド値を保持する。

本ガイドでは、より一般的で拡張性の高い2番目のアプローチを採用します。

実装のポイントとして、各入力フィールドには必ずユニークな name 属性を設定してください。
また、ステートを初期化する際は、文字列ではなくオブジェクトを使用します。初期値がない場合は、空のオブジェクト {} を指定します。

1.1 実装例

useState フックを使用して入力を管理するコードは以下の通りです。

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  // オブジェクトでステートを管理
  const [inputs, setInputs] = useState({});

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    // スプレッド構文とブラケット記法を使用して特定のフィールドのみ更新
    setInputs(values => ({...values, [name]: value}))
  }

  return (
    <form>
      <label>名（First name）:
      <input 
        type="text" 
        name="firstname" 
        value={inputs.firstname || ""} 
        onChange={handleChange}
      />
      </label>
      <label>姓（Last name）:
        <input 
          type="text" 
          name="lastname" 
          value={inputs.lastname || ""} 
          onChange={handleChange}
        />
      </label>
      <p>現在の値: {inputs.firstname} {inputs.lastname}</p>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

1.2 コードの解説

まず注目すべき点は、単一の useState を呼び出す際に、初期値を保持するためにオブジェクトを使用していることです。この例では初期値がないため、空のオブジェクトを渡しています。

const [inputs, setInputs] = useState({});

次に、複数の入力フィールドを処理できるように更新された handleChange 関数についてです。
この関数内では、イベントハンドラーから e.target.name と e.target.value を取得して各フィールドにアクセスしています。

ステートを更新する際は、プロパティ名を角括弧 [] で囲む「ブラケット記法」を使用します。

function handleChange(e) {
  const name = e.target.name;
  const value = e.target.value;
  // 前のステート（values）をコピーしつつ、[name]のキーに新しいvalueを割り当てる
  setInputs(values => ({...values, [name]: value}))
}

入力値（value）を参照する際は、ステートオブジェクト名である inputs に続けて、各入力フィールドの name 属性を指定します。

<input 
  type="text" 
  name="firstname" 
  value={inputs.firstname} 
  onChange={handleChange}
/>
<input 
  type="text" 
  name="lastname" 
  value={inputs.lastname} 
  onChange={handleChange}
/>
<p>現在の値: {inputs.firstname} {inputs.lastname}</p>

2. 初期値の設定 (Initial Values)

上記の例の入力フィールドに初期値を設定したい場合は、useState に渡すオブジェクトに適切なキーと値を定義します。

2.1 実装例

firstname と lastname に初期値を設定する場合：

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'John',
    lastname: 'Doe'
  });

  // ...残りのロジックは同様
}