e.preventDefault()について

はじめ

React の勉強をしていて、e.preventDefault() という処理が出てきたので、理解を深めるために調べてみたものをまとめます。

まず「デフォルト(default)」とは？

ブラウザには、HTML要素ごとに最初から決まっている動作があります。

例えば、

要素	デフォルトの動作
<form>	送信するとページを再読み込みする
<a href="...">	リンク先へ移動する
<input type="checkbox">	チェック状態が切り替わる

例えば

<form>
	<inputtype="text">
	<buttontype="submit">送信</button>
</form>

送信ボタンを押すと、ブラウザは

フォームが送信される
↓
サーバへ送信
↓
ページを再読み込み

という動作を自動で行います。

これがデフォルトの動作です。

e.preventDefault()とは？

e.preventDefault()は

ブラウザのデフォルト動作をキャンセルする

という命令です。

つまりe.preventDefault()を書くと

送信ボタンを押す
      ↓
ブラウザ：ページを再読み込み
      ↓
React：再読み込みはせず、必要な部分だけ更新
      ↓
ページはそのまま表示される

となります。

e.preventDefault()を書かないと、フォーム送信後にブラウザがページを再読み込みする。
結果、Reactが最初から起動し直され、入力内容や画面の状態が消えてしまうことがある。

eとは？

e は event（イベント） の頭文字を取った略称で、イベントオブジェクトを表します。
イベントオブジェクトには、ユーザーが行った操作に関する情報がまとめられています。
例えば、以下のような操作が発生すると、Reactはそのイベント情報を自動的にeに渡します。
　・クリック
　・フォーム送信
　・キーボード入力
　・マウス操作

eにはe.preventDefault()以外にも、次のような情報や機能が含まれています。
　・e.target：イベントが発生した要素（フォームやボタンなど）
　・e.type：イベントの種類（submit や click など）

e.preventDefault()の使用例（ログインフォーム）

import { useState } from "react";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    // フォームのデフォルトの送信（ページリロード）を防ぐ
    e.preventDefault();

    try {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });

      if (!response.ok) {
        throw new Error("ログインに失敗しました");
      }

      // ログイン成功後に/dashboardへ遷移
      navigate("/dashboard");
      
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>メールアドレス</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>

      <div>
        <label>パスワード</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>

      <button type="submit">ログイン</button>
    </form>
  );
}

処理の流れは以下のようになります。

ログインボタンを押す
        ↓
e.preventDefault()でフォーム送信を止める
        ↓
handleSubmitが実行される
        ↓
APIへPOSTリクエストを送信
        ↓
成功したらダッシュボードへ遷移

このように e.preventDefault() を使うことで、ブラウザのデフォルト動作を制御し、Reactらしいスムーズな画面更新を実現できます。