【React】aタグで遷移させない!preventDefaultの使用方法

a要素をクリック時に画面遷移させずに、アラート文を表示するJavaScript(React)文についてまとめておきます。

目標物としては、下記のようにリンク部分をクリックしたときに、

画面遷移させずにアラート文を表示するものを作成します。

プログラムは次のようになります。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {

      function Counter(props) {

          function count(e, color) {
            e.preventDefault(); /* 画面の遷移を防ぐ */
            alert(color);
          }

          return (
            <li style={{backgroundColor:props.color}} >
              <a href="#" onClick={e => count(e, props.color)}>
              0
              </a>
            </li>
          )
      }

      ReactDOM.render(
        <div className="container">
          <ul>
            <Counter color="red" />
            <Counter color="blue "/>
            <Counter color="yellow"/>
          </ul>
        </div>,
        document.getElementById('root')
      );
    })()
  </script>
</body>
</html>

styles.css

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.container {
  width: 330px;
  margin: 20px auto;
}

.container ul {
  list-style: none; /* リストの点なし */
  margin: 0;
  padding: 0;
  display: flex; /* 横並び */
  flex-wrap: wrap; /* 折り返し */
}

.container li {
  width: 100px;
  height: 100px;
  line-height: 100px; /* 縦方向中央揃え */
  text-align: center; /* 横方向中央揃え */
  cursor: pointer;
  user-select: none; /* ユーザが選択不可 */
  border-radius: 5px; /* 角を丸くする */
  margin: 0 5px 10px;
}

誰かの参考になれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中