問題一覧に戻る
中級フォーム処理
問題44: 制御コンポーネント

valueとonChangeの連携によるReactでの状態管理を学びます。制御コンポーネントは、フォーム要素の値をReactのstateで管理するパターンです。これにより、フォームの値を常にReactが制御でき、バリデーションや条件付きレンダリングが容易になります。入力値の変更はonChangeイベントで検知し、stateを更新することで、単一の信頼できるデータソースを維持します。

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  return (
    <div>
      {/* 制御された入力 */}
      <input
        ={name}
        ={(e) => setName(e.target.value)}
      />
      {/* 数値入力 */}
      <input
        type="number"
        value={}
        onChange={(e) => (e.target.value)}
      />
      <p>{name} ({age})</p>
    </div>
  );
}

export default Form;
···