1. フォーム送信とは何か

フォーム送信とは、名前やメールアドレスなどを入力し、送信ボタンを押したときに内容をまとめて処理することです。紙の申込書に必要事項を書いて、提出箱に入れる行為とよく似ています。 Reactでは、この「提出した瞬間」を検知するためにonSubmitという仕組みを使います。

2. onSubmitの基本的な役割

onSubmitは、formタグに設定します。これにより、送信ボタンが押されたときや、キーボードの確定操作が行われたときに処理が実行されます。ボタンのクリックだけを見るよりも、フォームとして自然な動きを実現できます。

3. 最もシンプルなonSubmitの例

まずは、送信されたことを画面に知らせるだけの、とても簡単な例を見てみましょう。


import React from "react";

function App() {
  const handleSubmit = () => {
    alert("フォームが送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（送信ボタンを押すと、送信されたことが表示されます）

4. ページが再読み込みされる理由

初心者が戸惑いやすい点として、フォームを送信すると画面が一度消えてしまうことがあります。これは、もともとのWebの仕組みで、フォーム送信時にページを再読み込みする動きがあるためです。 Reactでは、この動きを止めることがよくあります。

5. preventDefaultで再読み込みを防ぐ

再読み込みを止めるには、 event.preventDefaultという処理を使います。これは「元の動きをやめてください」と伝える命令です。電車の自動ドアが閉まる前に止めるようなイメージです。


import React from "react";

function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("ページは再読み込みされません");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（画面はそのままで、メッセージだけが表示されます）

6. 入力内容を送信時に使う方法

実際のフォームでは、入力された内容を送信時にまとめて扱います。これは、箱に入れた書類を一度に取り出して確認する感覚です。 Stateに保存した値を、 onSubmitの中で使うことができます。


import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("入力された名前：" + name);
  };

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

export default App;

（入力した名前が送信時に表示されます）