複数のinputをまとめて処理する

複数の入力フィールド（例：名前・メールアドレス・パスワードなど）をReactで一括管理するには、オブジェクト型のステートと共通のonChangeハンドラを使うのが一般的です。

オブジェクトでstateを定義する

import { useState } from "react";

export const FormExample = () => {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent
<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  return (

<form>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="名前"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="メールアドレス"
      />
      <input
        name="password"
        type="password"
        value={form.password}
        onChange={handleChange}
        placeholder="パスワード"
      />

<pre>{JSON.stringify(form, null, 2)}</pre>
    </form>
  );
};

• form という1つのstateオブジェクトで、全てのinputの値を管理しています。
• input にそれぞれ name 属性を設定し、それを元に setForm 内で該当のプロパティだけを更新しています。
• setForm((prev) => ({ ...prev, [name]: value })) で他の項目を保持したまま該当フィールドだけ更新します。

型定義（TypeScript）

type FormState = {
  name: string;
  email: string;
  password: string;
};

const [form, setForm] = useState
<FormState>({
  name: "",
  email: "",
  password: "",
});

入力項目が増えてもスケーラブルに拡張でき、バリデーション処理や送信ロジックの整理にも有効です。