React フォームの送信

Volardev 編集部 April 28, 2026

1. フォームの送信 (Submitting Forms)

<form> 要素の onSubmit 属性にイベントハンドラーを追加することで、フォームのサブミット（送信）時のアクションを制御できます。

1.1 実装例

以下は、サブミットボタンと onSubmit 属性へのイベントハンドラーを追加した例です。

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

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

  // インプットの変更を検知してステートを更新
  function handleChange(e) {
    setName(e.target.value);
  }

  // フォームのサブミットを処理
  function handleSubmit(e) {
    // ブラウザのデフォルト挙動（ページのリロード）を抑制
    e.preventDefault();
    // 現在のステート（入力された名前）をアラート表示
    alert(`送信された名前: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>名前を入力してください:
        <input
          type="text" 
          value={name}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="送信" />
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

1.2 ポイント解説

e.preventDefault(): React でフォームを扱う際、最も重要なポイントの一つです。これを呼び出さないと、従来の HTML フォームと同様にブラウザがサーバーにリクエストを送り、ページ全体がリフレッシュされてしまいます。SPA（Single Page Application）としての挙動を維持するために必須の処理です。
イベントハンドラーの紐付け: <form> タグ自体の onSubmit 属性にハンドラーを渡します。ボタンの onClick ではなく、フォームの onSubmit を使うことで、Enter キーによる送信など、ユーザーの直感的な操作を網羅できます。