1. 入力フォームをStateで管理するとは

Reactで入力フォームをStateで管理するとは、入力された文字や数字を、 Reactの状態として保存し、画面表示もその状態に合わせて動かすことです。これを制御されたコンポーネントと呼びます。

制御とは「コントロールする」という意味です。入力欄をHTML任せにせず、Reactが責任を持って管理するイメージです。ノートにメモを書いておくように、Reactの中に入力内容を保存します。

2. なぜ制御されたコンポーネントが必要なのか

入力内容をReactが管理すると、今どんな文字が入っているのかをプログラムの中からいつでも確認できます。ボタンを押したときの処理や、画面の表示切り替えが簡単になります。

例えるなら、先生が出席表を手元に持っている状態です。生徒の名前をすぐ確認できるので、呼び出しや確認が楽になります。

3. useStateを使った最も基本的な入力フォーム

ReactではuseStateという仕組みを使ってStateを作ります。 useStateは「覚えておく箱」を用意するものだと考えてください。


import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>入力内容：{text}</p>
    </div>
  );
}

export default App;

（文字を入力すると、その内容がそのまま画面に表示されます）

4. valueとonChangeの役割を理解しよう

valueは「今表示する値」を指定します。 onChangeは「入力が変わった瞬間」に動く処理です。この2つをセットで使うことで、入力フォームを完全にReactが管理します。

ラジオの音量つまみを想像してください。つまみを回すと音量が変わり、その状態を機械が覚えます。 onChangeが回す動作で、valueが今の音量です。

5. ボタンと組み合わせた制御されたフォーム

入力した内容を、ボタンを押したタイミングで使う場面はとても多いです。 Stateで管理していれば、簡単にその値を使えます。


import React, { useState } from "react";

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

  const handleClick = () => {
    alert("あなたの名前は「" + name + "」です");
  };

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={handleClick}>確認</button>
    </div>
  );
}

export default App;

（ボタンを押すと、入力した名前が表示されます）

6. 複数の入力欄をStateで管理する方法

実際のフォームでは、名前やメールアドレスなど複数の入力欄があります。 Reactでは、それぞれを別のStateとして管理します。


import React, { useState } from "react";

function App() {
  const [email, setEmail] = useState("");
  const [age, setAge] = useState("");

  return (
    <div>
      <input
        placeholder="メールアドレス"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="年齢"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <p>{email} / {age}</p>
    </div>
  );
}

export default App;

（それぞれの入力内容がReactに別々に保存されます）