クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【React】イベント属性を使ってみた(onChangeとonClick)

Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChangeonClickを使ってみます。それではいきましょう!

【目次】

前回記事
※参考:【React】JSXレンダリングとタイマー処理(setInterval())の関係を理解する - クモのようにコツコツと

Reactでやってみたことまとめ
qiita.com

作ってみたもの

今回も掌田さんの「React.js & Next.js超入門」を参考に進める。

React.js&Next.js超入門

React.js&Next.js超入門

作ってみたものこちら。

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 = '';
  • 変数h2Textmessagenameにテキストの初期値を設定している。
  • messagenameはのちに書き換えるのでlet
  • nameの初期値はブランク。

inputの値をテキストに組み込む

ここから関数設定。最初はdoCnange()関数。

let doCnange = (event) => {
    name = event.target.value;
    message = '王「おお ' + name +'!勇者ロトの血をひきし者よ!そなたが来るのを待っておった。」'; 
};
  • doCnange()関数の設定。引数はevent
  • nameeventのターゲット(下のJSXにあるinputタグ)の値を入れる
  • messageのテキストを変更。中にnameも組み込まれている

targetプロパティ はイベントが起きた際の対象(オブジェクト)を示し、eventeなどイベントとわかりやすい名前の引数に繋げる使い方をする。

※参考:.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()メソッドでtextelmにレンダリングする

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()の中のイベントが発生した時に動く。これで全ての動きが完成する。

最後に

f:id:idr_zz:20200331075905j:plain

Reactのイベントってなんとなくイベントハンドラと似たイメージを持っていたが、大文字小文字、波カッコなど書き方の違いをはっきり認識することができました!

次回からはいよいよ、コンポーネントに入っていく予定です。それではまた!


Reactでやってみたことまとめ
qiita.com