1. Reactのフォーム処理とは何をしているのか

Reactのフォーム処理とは、入力欄に打ち込まれた文字や数字を、プログラムの中で管理することです。

例えるなら、紙のアンケートに書いた内容を、ノートに書き写して覚えておくようなイメージです。 Reactでは、この「覚えておく」役割を状態が担当します。

2. ライブラリを使わないフォーム実装の考え方

フォーム用の便利なライブラリはたくさんありますが、仕組みを知らずに使うと、エラーが出たときに困ります。

まずはReactに元から用意されている機能だけで、入力・表示・送信の流れを理解することが大切です。

3. 文字を入力するだけの一番シンプルなフォーム

ここでは、名前を入力して画面に表示するだけのフォームを作ります。フォーム処理の基本がすべて詰まっています。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>{name}</p>
    </div>
  );
}

export default App;

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

onChangeは、入力が変わったことを知らせる合図です。 e.target.valueは、入力欄に書かれている中身を意味します。

4. ボタンを押して送信するフォームの基本

次は、ボタンを押したときに処理が動くフォームです。フォーム送信は、箱に入れた手紙を渡すようなものです。


import React, { useState } from "react";

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

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

  return (
    <div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSubmit}>送信</button>
    </div>
  );
}

export default App;

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

handleSubmitは、送信時に実行したい処理をまとめた関数です。処理に名前を付けることで、内容が分かりやすくなります。

5. 複数の入力欄を扱うシンプルな方法

フォームでは、名前やメールなど複数の入力欄を使うことが多いです。それぞれを別の状態として管理します。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="メール"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <p>{name}</p>
      <p>{email}</p>
    </div>
  );
}

export default App;

（それぞれの入力内容が画面に表示されます）

少しコードは増えますが、動きが分かりやすく、初心者には理解しやすい書き方です。

6. フォーム送信時に画面を更新しない工夫

フォームを送信すると、画面が再読み込みされることがあります。これを防ぐには、イベントの動きを止めます。


import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(text);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（画面が切り替わらず、入力内容だけが表示されます）

preventDefaultは、もともとの動きを止めるための言葉です。ブレーキのような役割を持っています。