Reactでデフォルト動作を止める！preventDefaultの使い方を初心者向けに解説

1. preventDefaultの基本的な使い方

1. preventDefaultの基本的な使い方

Reactではフォームの送信やリンククリックなど、ブラウザが自動で行う動作をキャンセルしたいときがあります。例えば、フォームの送信ボタンを押してもページをリロードせずにJavaScriptで処理をしたい場合です。そんなときにevent.preventDefault()を使います。

import React from "react";

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("フォーム送信をキャンセルしました！");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="名前を入力" />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

2. preventDefaultを使う理由

2. preventDefaultを使う理由

Reactではフォーム送信やリンククリックを直接処理したいケースがあります。通常、フォームを送信するとページがリロードされてデータが消えてしまうことがあります。preventDefaultを使うことで、データを保持しつつ処理を行うことができ、ユーザー体験を向上させることができます。

また、リンククリックでもpreventDefaultを使うことで、ページ遷移をせずにモーダル表示や画面内のコンテンツ切り替えなどを実現できます。

3. 応用例：リンククリックのキャンセル

3. 応用例：リンククリックのキャンセル

リンクタグは通常クリックすると指定URLに移動します。しかし、Reactでは移動せずにJavaScriptで処理をしたいことがあります。その場合もpreventDefaultを使います。

import React from "react";

function App() {
  const handleClick = (event) => {
    event.preventDefault();
    alert("リンクのデフォルト動作をキャンセルしました！");
  };

  return (
    <a href="https://example.com" onClick={handleClick}>
      クリックしてもページは移動しません
    </a>
  );
}

export default App;

4. 注意点

4. 注意点

preventDefaultは便利ですが、必要な場合だけ使うようにしましょう。全てのフォーム送信やリンククリックで使うと、ユーザーが本来行いたい動作までキャンセルしてしまう可能性があります。また、ReactではSyntheticEventという独自のイベントオブジェクトを使っていますが、preventDefaultは通常のDOMイベントと同じように使えます。

これにより、フォームバリデーションや画面遷移の制御など、より柔軟なイベント処理が可能になります。

5. ボタンクリック時のpreventDefaultの使いどころ

5. ボタンクリック時のpreventDefaultの使いどころ

Reactでは、フォーム内のボタンをクリックした際にもブラウザのデフォルト動作が発生することがあります。 特にbuttonタグは、type属性を指定しない場合、自動的に送信ボタンとして扱われることがあるため注意が必要です。 意図せずフォーム送信が行われるケースでは、クリックイベント内でpreventDefaultを使うことで動作を制御できます。

このような場面では、Reactのイベントハンドラを使ってユーザー操作を正確に管理することが重要です。 クリック処理と画面更新を分けて考えることで、意図したユーザーインターフェースを実現できます。

6. preventDefaultとReactのイベントハンドリングの関係

6. preventDefaultとReactのイベントハンドリングの関係

Reactでは、ブラウザのイベントをそのまま使うのではなく、SyntheticEventという仕組みを通してイベントを扱います。 そのため、Reactでのイベント処理は統一された書き方ができ、ブラウザ間の差異を意識せずに開発が進められます。 preventDefaultも、このイベントオブジェクトを通じて利用できます。

フォーム送信、クリック、キーボード入力など、さまざまなユーザー操作に対して同じ考え方でイベント制御が可能です。 ReactのイベントハンドリングとpreventDefaultを組み合わせることで、より安定した画面制御が行えるようになります。

7. 実務でよくあるpreventDefaultの活用シーン

7. 実務でよくあるpreventDefaultの活用シーン

実際のReact開発では、preventDefaultはログインフォームや検索フォーム、ページ内リンクなどで頻繁に使われます。 入力内容を確認してから処理を進めたい場合や、画面を切り替えずに結果を表示したい場合に特に効果的です。

このような場面でデフォルト動作を正しく止められるかどうかは、Reactアプリケーションの使いやすさに直結します。 基本的な使い方を理解し、必要な場面で適切にpreventDefaultを使うことが、React初心者から一歩成長するためのポイントです。

まとめ

まとめ

preventDefaultで理解するReactのイベント制御

ここまで、ReactにおけるpreventDefaultの使い方について、フォーム送信やリンククリックを例にしながら学んできました。 Reactでアプリケーションを作成する際、ユーザーの操作に応じたイベント処理は非常に重要な要素です。 特にフォームやリンクは、ブラウザがもともと持っているデフォルト動作があるため、そのまま使うとページ遷移やリロードが発生し、 状態管理や画面制御が難しくなることがあります。 preventDefaultを正しく使うことで、Reactらしいシングルページアプリケーションの挙動を実現できるようになります。

フォーム送信では、送信ボタンを押した瞬間にページが更新されるのが通常の動作です。 しかし、Reactでは入力値をstateで管理し、送信時にバリデーションや非同期通信を行うケースが多くあります。 そのような場面でpreventDefaultを使うことで、ページの再読み込みを防ぎ、 入力内容を保持したまま処理を続けることができます。 これは、ユーザー体験を向上させるうえで欠かせない考え方です。

また、リンククリックにおいてもpreventDefaultは重要です。 通常のaタグはクリックすると別ページへ遷移しますが、 Reactでは画面内の表示切り替えやモーダル表示など、 ページ遷移を伴わない操作を実装することがよくあります。 その際にデフォルト動作を止めることで、JavaScriptによる柔軟な制御が可能になります。 Reactのイベント処理は、ユーザー操作と画面表示を結びつける大切な仕組みであることを理解しておきましょう。

まとめとしてのサンプルプログラム

ここでは、これまでの内容を踏まえたシンプルなサンプルプログラムを改めて確認します。 フォーム送信時にpreventDefaultを使い、Reactでイベントを制御する基本的な形です。 実際の開発でもよく使われる構造なので、しっかりとイメージをつかんでおきましょう。

import React from "react";

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Reactでフォーム送信を制御しています");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="テキストを入力" />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

このように、onSubmitイベントの中でpreventDefaultを呼び出すことで、 ブラウザのデフォルト動作を止めつつ、React側で自由に処理を記述できます。 フォームバリデーション、API通信、画面更新など、 実務でも頻繁に登場する重要なパターンです。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Reactでフォーム送信をキャンセルするにはどうすればいいですか？

Reactではフォーム送信をキャンセルしたい場合、event.preventDefault()を使うことでブラウザのデフォルト動作であるページリロードを防ぐことができます。