1. テキストボックスとフォーム処理の基本

テキストボックスとは、キーボードで文字を入力するための部品です。名前入力や検索欄など、ほとんどのWebサイトで使われています。 Reactでは、この入力された文字をそのまま放置せず、プログラムで扱えるようにします。

入力された文字を管理する仕組みをフォーム処理と呼びます。 Reactでは、画面とデータを同じ状態に保つことがとても重要です。

2. Stateとは何かをやさしく理解しよう

Stateとは、Reactの中で使われる「今の状態」を表す仕組みです。難しく考えず、「メモ帳」や「引き出し」を想像してください。テキストボックスに入力した文字を、この引き出しにしまいます。

しまっておけば、あとで取り出して画面に表示したり、ボタンを押したときに使ったりできます。 Stateは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が反応し、新しい文字がStateに保存されます。

5. ボタンと組み合わせて入力値を使う

入力した文字は、ボタンを押したときに使うことがよくあります。 Stateに保存されていれば、いつでも取り出せます。これがReactで入力値を管理する大きなメリットです。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  const handleClick = () => {
    alert(message);
  };

  return (
    <div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleClick}>表示</button>
    </div>
  );
}

export default App;

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

6. 複数のテキストボックスを管理する方法

実際のフォームでは、入力欄が一つだけとは限りません。名前やコメントなど、複数のテキストボックスを使います。 Reactでは、それぞれにStateを用意します。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="コメント"
        value={comment}
        onChange={(e) => setComment(e.target.value)}
      />
      <p>{name}：{comment}</p>
    </div>
  );
}

export default App;

（それぞれの入力値が別々に管理されます）