e.preventDefault()について理解する

はじめに

React の勉強をしていて、イベントハンドラーの中でe.preventDefault() という処理が出てきたので、理解のために調べてみたものをまとめます。

e.preventDefault()とは

e.preventDefault()は、ブラウザが元々持っている特定のイベントの動作を、動作させないようにするもの。

例えば、フォームを送信する際に、ブラウザのデフォルトの挙動だと送信時にページがリロードされてしまいます。（一瞬画面がチラつく）

const handleSubmit = (e) => {
  e.preventDefault();
  // フォーム送信の処理
};

e.preventDefault()　　を入れることで、リロードすることを防ぐことができました。

フォームを送る時以外にも例えば、リンクをクリックした時にリンク先に遷移することを防ぎたい時にも使えます。

const LinkComponent = () => {
  const handleClick = (e) => {
    e.preventDefault();
    // デフォルトのリンククリック動作をキャンセルする
    console.log('リンクがクリックされました。ページの遷移を防ぎました。');
  };

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

まとめ

ブラウザのデフォルトの動作を止めて、カスタムした処理を実行したいときに使える処理、e.preventDefault()でした。