Cloud9環境でReactの検証⑥ -イベント処理(button、input)-

本章ではReactでのイベント処理について説明します。

ある程度Reactについては触れることができたので、本当はReduxについての学習を始めようかと思っていました。が、React-Reduxの記事を読み漁ってみた結果、Reactの理解が全く足りていないことが分かったので、もうしばらくReactをやろうと思いました。

本章で紹介する2つのアプリについて、React-Reduxで作成しようとしましたが、できませんでした 笑。なので、React単体で作るとどうなるのかを検証しました。

1. 数字のIncrementとDecrement

---

簡単なアプリです。Incrementボタンをクリックすると画面表示の数字に1加算され、Decrementボタンをクリックすると画面表示の数字から1減算されるというものです。

これまでの記事の知識で書くと、下記のようなコードになりました。

app.js

/*global $*/

import React from "react";
import ReactDOM from "react-dom";

var ValueBox = React.createClass({
    render: function(){
        return(
            <div>
                <h1>{this.props.value}</h1>
                <button onClick={this.props.Increment}>Increment</button>
                <button onClick={this.props.Decrement}>Decrement</button>
            </div>
        );
    }
});

var ValueData = React.createClass({
    getInitialState: function(){
        return{
            value: 0
        };
    },
    Increment(){
        this.setState({
            value: this.state.value + 1
        });
    },
    Decrement(){
        this.setState({
            value: this.state.value - 1
        });
    },
    render: function(){
        var value = this.state.value;
        return(
            <ValueBox value={value} Increment={this.Increment} Decrement={this.Decrement}/>
        );
    } 
});

ReactDOM.render(
    <ValueData />,
    document.getElementById('content')
);

親コンポーネントの関数をどうやって子コンポーネントから呼び出すかが、最初はわかりませんでしたが、親コンポーネントでIncrement={this.Increment} で渡してやれば、子コンポーネントで{this.props.Increment} と記載して呼び出せました。

最初間違えてIncrement={this.Increment()} で渡そうとしたら、Increment()が連続で呼び出され続け、画面がフリーズしました。。

上記実装時の画面は下記のようになります。味気ないですね。。

1. テキストフォームの入力値を画面表示

---

意味が分かりにくいタイトルになってしまいました。要は、テキストフォームに入力した文字が、リアルタイムで画面に表示されるアプリです。

app.js

/*global $*/

import React from "react";
import ReactDOM from "react-dom";

var TextBox = React.createClass({
    render: function(){
        return(
            <div>
                <h1>{this.props.text}</h1>
                <input
                 type="text"
                 value={this.props.text}
                 onChange={this.props.change}
                />
            </div>
        );
    }
});

var TextData = React.createClass({
    getInitialState: function(){
        return{
            text: ""
        };
    },
    handleChange: function(event){
        this.setState({
            text: event.target.value
        });
    },
    render: function(){
        var text = this.state.text;
        return(
            <TextBox text={text} change={this.handleChange}/>
        );
    } 
});

ReactDOM.render(
    <TextData />,
    document.getElementById('content')
);

handleChange でテキストフォームへの入力値event.target.value をtextに代入しています。「数字のIncrementとDecrement」を試してみた後だと、特筆すべき点はないですね。

上記実装時の画面は下記のようになります。味（ry

3. 引用 ----- Forms | React https://facebook.github.io/react/docs/forms.html

1. 関連記事

---

cloud9環境でReactの検証① -導入-
cloud9環境でReactの検証② -コンポーネント-
cloud9環境でReactの検証③ -変数の扱い-
cloud9環境でReactの検証④ -ループ-
Cloud9環境でReactの検証⑤ -Ajax、state管理-