【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; }
誰かの参考になれば幸いです。