1. フォームが増えると何が大変なのか

Reactでフォームを作り始めたばかりの頃は、入力欄が一つか二つなので問題になりません。しかし、名前、メール、年齢、住所など項目が増えてくると、それぞれに状態を持たせる必要があります。

状態とは、画面の今の状態を記憶しておく箱のようなものです。入力欄ごとに箱を作ると、数が増えて管理が難しくなります。

2. useStateを一つずつ使う基本的な方法

まずは、よくある書き方を確認してみましょう。初心者の多くが最初に書く方法です。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </div>
  );
}

export default App;

（それぞれの入力欄に入力した内容が状態として保存されます）

3. オブジェクトを使ってまとめて管理する考え方

複数のフォームをまとめて管理したい場合は、オブジェクトという仕組みを使います。オブジェクトとは、複数の情報を一つにまとめた箱です。

例えるなら、引き出しがたくさんある収納ケースのようなものです。名前の引き出し、メールの引き出し、といった形で管理できます。

4. オブジェクトで複数フォームを管理する実装例

useStateを一つだけ使い、その中で複数の入力値を管理します。これにより、コードがすっきりします。


import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: ""
  });

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div>
      <input name="name" value={form.name} onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
    </div>
  );
}

export default App;

（入力した内容が一つの状態としてまとめて管理されます）

5. 入力欄が増えても対応できるメリット

この方法の良い点は、入力欄が増えても状態の数が増えないことです。住所や電話番号を追加しても、同じ仕組みで管理できます。

handleChangeという一つの処理で全ての入力を受け取れるため、修正や追加がしやすくなります。

6. 複数フォームを配列で管理する方法

同じ形のフォームが何個もある場合は、配列を使って管理する方法もあります。配列とは、同じ種類のデータを順番に並べたものです。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["", ""]);

  const handleChange = (index, value) => {
    const newItems = [...items];
    newItems[index] = value;
    setItems(newItems);
  };

  return (
    <div>
      {items.map((item, index) => (
        <input
          key={index}
          value={item}
          onChange={(e) => handleChange(index, e.target.value)}
        />
      ))}
    </div>
  );
}

export default App;

（同じ入力欄をまとめて管理できます）