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