Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChange
とonClick
を使ってみます。それではいきましょう!
【目次】
前回記事
※参考:【React】JSXレンダリングとタイマー処理(setInterval())の関係を理解する - クモのようにコツコツと
Reactでやってみたことまとめ
qiita.com
作ってみたもの
今回も掌田さんの「React.js & Next.js超入門」を参考に進める。
- 作者:津耶乃, 掌田
- 発売日: 2019/03/08
- メディア: 単行本
作ってみたものこちら。
See the Pen React - event by イイダリョウ (@i_ryo) on CodePen.
名前を入力すると、ドラクエ1の最初の王様のセリフに自分の名前が組み込まれる。
セリフはこちらを引用させていただきました。
※参考:セリフ考察(ラダトームの城)|ドラゴンクエスト1 完全攻略(SFC/Wii/iOS/Android版対応)
名前を入力すると、その名前をテキストに組み込んで表示する、という挙動が「イベント」に当たる。どんな書き方をしているのか。
コード全体
まずはHTMLコード
<section> <h1>Reactのイベント処理</h1> <div class="text">読み込み中…</div> </section>
これはいつもと変わらない構成。.text
の内容をJSXで書き換えている。
JSコード
//DOM取得 const text = document.querySelector('.text'); //JSXに埋め込む値 const h2Text = 'ラダトームの城'; let message = '名前を入れてください'; let name = ''; let doCnange = (event) => { name = event.target.value; message = '王「おお ' + name +'!勇者ロトの血をひきし者よ!そなたが来るのを待っておった。」'; }; let doAction = (event) => { //JSXの中身 let elm = ( <section className="h2_elem"> <h2>{ h2Text }</h2> <div className="form"> <input type="text" id="name" onChange={ doCnange } /> <button onClick={ doAction }>決定</button> </div> <p>{ message }</p> </section> ); ReactDOM.render(elm, text); }; doAction();
そんなに長くはない。以下、JSコードの内容をみていく。
初期値の設定
JSコードを見ていく。まずはDOM取得。
//DOM取得 const text = document.querySelector('.text');
- 変数
text
でDOMの.text
を取得。
次にテキストの初期値。
//JSXに埋め込む値 const h2Text = 'ラダトームの城'; let message = '名前を入れてください'; let name = '';
- 変数
h2Text
、message
、name
にテキストの初期値を設定している。 message
とname
はのちに書き換えるのでlet
name
の初期値はブランク。
inputの値をテキストに組み込む
ここから関数設定。最初はdoCnange()
関数。
let doCnange = (event) => { name = event.target.value; message = '王「おお ' + name +'!勇者ロトの血をひきし者よ!そなたが来るのを待っておった。」'; };
doCnange()
関数の設定。引数はevent
name
にevent
のターゲット(下のJSXにあるinputタグ)の値を入れるmessage
のテキストを変更。中にname
も組み込まれている
target
プロパティ はイベントが起きた際の対象(オブジェクト)を示し、event
やe
などイベントとわかりやすい名前の引数に繋げる使い方をする。
※参考:.target | JavaScript 日本語リファレンス | js STUDIO
※参考:Event.target - Web API | MDN
今回は後ほど下のJSXで出てくるinputタグの中の値がこれに当たる。inputに入れられた名前を取得してメッセージに組み込む、という内容。
イベント設定(onChangeとonClick)
次にdoAction()
関数の設定
let doAction = (event) => { //JSXの中身 let elm = ( <section className="h2_elem"> <h2>{ h2Text }</h2> <div className="form"> <input type="text" id="name" onChange={ doCnange } /> <button onClick={ doAction }>決定</button> </div> <p>{ message }</p> </section> ); ReactDOM.render(elm, text); };
doAction()
関数の設定。引数はevent
- 変数
elm
でJSXを設定 input
タグの中にonChange
属性があり、doCnange
関数を実行するbutton
タグの中にonClick
属性があり、doAction
関数を実行するp
タグのmessage
が関数実行によって書き換えられるReactDOM.render()
メソッドでtext
をelm
にレンダリングする
inputに入力するとdoCnange()
関数が発火し、buttonを押すとdoAction()
関数が動く、と言う内容。
onChange
属性とonClick
属性はReactのイベント属性でダブルコーテーションではなく波カッコ{ }
で囲う。中の関数名はカッコなしで書く。
イベントハンドラと書き方がよく似ているがイベントハンドラは全部小文字で関数にカッコが付くので注意。
<button onclick="doAction()">決定</button>
※参考:イベント処理 – React
Vue.jsでもイベントはタグの中にv-on:click
などの属性として書く。(ReactはJSXだが)
※参考:【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと
最後にdoAction()
関数を実行する。
doAction();
doCnange()
関数はdoAction()
の中のイベントが発生した時に動く。これで全ての動きが完成する。
最後に
Reactのイベントってなんとなくイベントハンドラと似たイメージを持っていたが、大文字小文字、波カッコなど書き方の違いをはっきり認識することができました!
次回からはいよいよ、コンポーネントに入っていく予定です。それではまた!
Reactでやってみたことまとめ
qiita.com