【学習記録】Reactのフォーム送信処理 — handleSubmit と (e) を理解する

Reactでフォームを作るとき、送信処理をについてのまとめです。 handleSubmit 関数と、引数として渡される (e) の役割をまとめます。

---

✒️基本的なコード構造

const FormApp = () => {
// State定義
const [customerName, setCustomerName] = useState("");
const [message, setMessage] = useState("");
const [isEmptyName, setIsEmptyName] = useState(false);

// 送信処理
const handleSubmit = (e) => {
  e.preventDefault();
  if (customerName !== "") {
    alert(`${customerName}さん、送信されました！`);
  } else {
    setIsEmptyName(true);
    return;
  }
  setCustomerName("");
  setMessage("");
};


  return (
    <div>
      <h1>お問い合わせフォーム</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label style={{ display: "block" }} htmlFor="name">
            お名前
          </label>
          <input
            type="text"
            id="name"
            name="customer_name"
            value={customerName}
            onChange={(e) => {
              setIsEmptyName(false);
              setCustomerName(e.target.value);
            }}
          />
          {isEmptyName && (
            <span style={{ color: "#FF0000", display: "block" }}>
              お名前を入力してください
            </span>
          )}
          <label style={{ display: "block" }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            type="text"
            id="message"
            name="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          {isEmptyName && (
            <span style={{ color: "#FF0000", display: "block" }}>
              メッセージを入力してください
            </span>
          )}
        </div>
        <button style={{ width: "100px" }} type="submit">
          送信
        </button>
      </form>
    </div>
  );
};

---

💡(e) はイベントオブジェクト

(e) は event の略で、ブラウザ上で起きたイベントの情報が自動で詰め込まれたオブジェクトです。event と書いても動作は同じで、どちらも慣習的な書き方です。

フォームが送信されると、Reactが自動的にこのオブジェクトを第一引数として渡してくれます。

プロパティ	内容
e.preventDefault()	デフォルト動作（ページリロード）をキャンセル
e.target.value	入力欄の値を取得
e.type	イベントの種類（"submit" など）

---

💡処理の流れ

1. 送信ボタンをクリック
   type="submit" のボタンが押され、フォームの onSubmit が発火する

2. e.preventDefault() でリロードをキャンセル
   これがないとページが再読み込みされてしまう

3. 名前の入力チェック
   入力あり → alertで完了通知
   入力なし → isEmptyName を true にしてエラー表示・処理中断

4. 入力欄をリセット
   送信成功後、customerName と message を空文字""に戻す

---

📖本件とは別の学び

勘違いしてしまったのですが、e.preventDefault() は prevState とは無関係です。prevState はStateを更新するときに使うもので、別の概念です。

また、type="submit" のボタンはフォームの onSubmit を自動で呼び出すため、ボタン側に onClick を書く必要はありません。Enterキーでも送信できるというメリットもあります。

---

✅️まとめ

イベントで包括した処理を学ぶことができました。フック関数をいくつか連ねる様になり少し混乱気味だったのですが、一つずつ紐解いていくことで道筋も見えるようになったので、皆さんの参考にもなれば幸いです。