イベント処理は、タグ内にonClick
などのイベントハンドラ用の属性を指定することで定義できます。
これだけ聞くと正直気持ち悪いですよねw 結論から言うと最終的には問題ない形でレンダリングされます。実際のサンプルコードを元に話を進めていきましょう。
目次
おみくじComponent
今回はボタンをクリックすると、運勢がアラートされる簡単な「おみくじ」を作成してみたいと思います。
サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>おみくじ</title>
<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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Omikuji extends React.Component {
dropOmikuji(e){
let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
let i = Math.ceil(Math.random() * 100) % unsei.length;
alert(`あなたの運勢は${unsei[i]}です`); // ``内に ${} で変数を埋め込めるのはES2015からの追加仕様
}
render() {
return <button onClick={this.dropOmikuji}>おみくじを引く</button>;
}
}
ReactDOM.render(
<Omikuji />,
document.getElementById('root')
);
</script>
</body>
</html>
実行結果
解説
onClick属性とかいつの時代だと感じた方へ
最近のJavaScriptでは以下のようにaddEventListener
でイベント発生時の処理を定義することが主流で、onClick
などのイベント属性内に書くことは推奨されていません。Reactを初見で気持ち悪いと感じる一つの要因かと思います。
document.querySelector("#foo").addEventListener("click", ()=>{
//何らかの処理
});
結論から言うとReact…というかJSXでは、実際にレンダリングされる際にはaddEventListener
に置き換わるようです。出力されたコードを見てみると、以下のようにonClickが跡形もなく消えているのがわかると思います。ご安心ください。
<div id="root">
<button>おみくじを引く</button>
</div>
任意の値を渡す
今回のサンプルのように onClick={this.methodname}
といった、ボタンが押されたら何らかの決まった処理をするだけであれば問題にならないのですが、任意の引数をメソッドや関数に渡したい場合は、以下のようにJavaScriptの機能であるbind
を利用します。
class Omikuji extends React.Component {
dropOmikuji(name, e){
let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
let i = Math.ceil(Math.random() * 10) % unsei.length;
alert(`${name}さんの運勢は${unsei[i]}です`);
}
render() {
return <button onClick={this.dropOmikuji.bind(this, "foo")}>おみくじを引く</button>;
}
}
その他にも、クロージャー(無名関数)を利用することもできます。以下ではES2015で登場したアロー関数を用いています。
class Omikuji extends React.Component {
dropOmikuji(name){
let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
let i = Math.ceil(Math.random() * 10) % unsei.length;
alert(`${name}さんの運勢は${unsei[i]}です`);
}
render() {
return <button onClick={()=>{ this.dropOmikuji("foo") } }>おみくじを引く</button>;
}
}
その他のイベント
今回はonClick
だけ試しましたが、同じ要領で他のイベントも定義することが可能です。一般的なJavaScriptのイベントハンドラは利用することができるようです。以下のコードでマウスオーバーとマウスアウトのイベントも同時に捕捉することができます。
class Omikuji extends React.Component {
dropOmikuji(name, e){
let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
let i = Math.ceil(Math.random() * 10) % unsei.length;
alert(`${name}さんの運勢は${unsei[i]}です`);
}
overOmikuji(){
console.log("マウスオーバー");
}
outOmikuji(){
console.log("マウスアウト");
}
render() {
return(
<button onClick={this.dropOmikuji.bind(this, "foo")}
onMouseOver={this.overOmikuji}
onMouseOut={this.outOmikuji} >
おみくじを引く
</button>
);
}
}
注意点
本来の要素の動作をキャンセルしたい
今回のサンプルでは<button>
要素を使いましたが、例えば<a>
要素だった場合には、ボタンをクリックするとイベント処理が終了したと同時に画面遷移が発生してしまいます。
render() {
return <a href="https://google.com/" onclick={this.dropOmikuji}>おみくじを引く</a>;
}
これを防ぐためには以下のようにpreventDefault()
を実行してやるだけです。試しに当該行をコメントアウトや削除すると、アラートが出たあとにGoogleへと遷移するのが確認できると思います。もちろん意図した物であれば問題ありません。
class Omikuji extends React.Component {
dropOmikuji(name, e){
e.preventDefault();
let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
let i = Math.ceil(Math.random() * 10) % unsei.length;
alert(`${name}さんの運勢は${unsei[i]}です`);
}
render() {
return <a href="https://google.com" onClick={this.dropOmikuji.bind(this, "foo")}>おみくじを引く</a>;
}
}
大文字と小文字は区別される
以下のように onCllick
ではなくすべて小文字で onclick
と書くと警告が出ます。
render() {
return <button onclick={this.dropOmikuji}>おみくじを引く</button>;
}
Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
このように大文字と小文字は区別されますのでご注意を。JSXがHTMLではなくXMLベースの仕様であることを再確認させられますねw
少括弧をうかつに付けない
以下のようにメソッド名の後ろに少括弧を書いてしまうと、イベント発生時ではなくrender()
時に実行されてしまいます。意図したものなら良いですがご注意を。
render() {
return <button onClick={this.dropOmikuji()}>おみくじを引く</button>;
}
書籍
翔泳社
売り上げランキング: 139,067
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
同じカテゴリの記事
- はじめてのReact #30 「CSSフレームワークを導入する」Material-UI テーマをカスタマイズ編
- はじめてのReact #29 「CSSフレームワークを導入する」Material-UI アイコンと文字スタイル編
- はじめてのReact #28 「CSSフレームワークを導入する」Material-UI グリッド編
- はじめてのReact #27 「CSSフレームワークを導入する」Material-UI インストール編
- はじめてのReact #26 「ルーティングに対応する」設定をJSONにまとめる編 react-router@v5
- はじめてのReact #25 「ルーティングに対応する」認証とリダイレクト編 react-router@v5
- はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5
- はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5
旧コメント欄(表示のみ)