たろ
Reactのクリックイベントの実装方法がわからない。
こんな疑問を解決します。
本記事の内容
- Reactのクリックイベントの実装方法の紹介
- 具体的なコードと実演も合わせて紹介
React のクリックイベントの基本形をメモしておきます。
初めて学ぶ言語は何度も繰り返し書かないと忘れがちなので、、、
これまでのReact学習記録
環境
実験は下記のファイル構成。
.
├── Dockerfile
├── css
│ └── styles.css
├── index.html
└── js
└── script.jsローカル環境で作業しています↓
index.html は下記の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Practice</title>
<link rel="stylesheet" href="./css/styles.css?1001">
<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@6.15.0/babel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="./js/scriptj.js"></script> -->
<script type="text/babel" src="./js/script.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>Reactの実装
script.js に下記のコードを貼り付けます。
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('ボタンがクリックされました。')
}
render () {
return (
<div>
<button onClick={this.handleClick}>ボタン</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);JavaScript では、クラスのメソッドはデフォルトではバインドされないため、this.handleClick へのバインドをせずに onClick に実装した場合、関数が呼ばれた時に this は undefined となります。
constructor に this.handleClick = this.handleClick.bind(this); と書くことがポイント。
追記2022.0617：関数コンポーネントによる実装
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
const buttonAlert = () => {
alert('ボタンがクリックされました。');
}
return (
<div className="App">
<header className="App-header">
Learn React App
</header>
<body>
<div>
<button onClick={buttonAlert}>ボタン</button>
</div>
</body>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
