Zenn
🐈

「e.preventDefault()」とは？

に公開
JavaScript
tech

e.preventDefault()とは

submitイベントでフォームの送信ボタンを押すとブラウザのデフォルト動作でページがリロードされてしまいます。

こちらのリロードを防げるためにはe.preventDefault()が必要です。

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // ✅リロード防止
    //...フォームの内容をJSで処理（例：fetchでAPIに送信）
};
  • フォーム送信時にページリロードなしで、React内で処理が完結
  • シングルページアプリケーション（SPA）の基本的な動作

e.preventDefault()がないと、、

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  // e.preventDefault() がない！
  // そのまま fetch などを処理しても…
};
  • フォームを送信するとページが再読み込みされて、fetchなどがキャンセルされる可能性あり
  • 結果：API処理が中断されたり、入力内容が消えたり、想定外の動作になることが多いです

Discussion