問題一覧に戻る
中級フォーム処理
問題49: 複数入力フィールド

オブジェクトstateを使用して複数の入力フィールドを管理する方法を学びます。関連する複数のフィールドを1つのオブジェクトにまとめることで、状態管理が整理されます。スプレッド構文を使用して既存の値を保持しながら、特定のプロパティのみを更新します。実際のフォームでは、ユーザー情報、住所情報など関連するデータをグループ化して管理することが一般的です。この方法により、フォーム送信時のデータ取得も簡潔になります。

import React, { useState } from 'react';

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

  return (
    <div>
      {/* 名前入力 */}
      <input
        value={form.name}
        onChange={(e) => (({ ...form, name: e.target.value }))}
      />
      {/* メール入力 */}
      <input
        value={form.}
        onChange={(e) => setForm({ ...form, : e.target.value })}
      />
      <p>{form.name} - {form.email}</p>
    </div>
  );
}

export default Form;
···