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

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

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

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

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

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

```javascript: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()```が連続で呼び出され続け、画面がフリーズしました。。

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/bf57a827-4656-5f74-b552-71abc6600d47.png" width="400px">

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

```javascript: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

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/d9d2e1be-09c1-b6f7-d253-cc3cc9462001.png" width="400px">
3. 引用
-----
Forms | React
https://facebook.github.io/react/docs/forms.html

4. 関連記事
-----
[cloud9環境でReactの検証① -導入-](http://qiita.com/tomine3/items/e6390cd6691a95a8ea53)
[cloud9環境でReactの検証② -コンポーネント-](http://qiita.com/tomine3/items/0e5e8965668051157901)
[cloud9環境でReactの検証③ -変数の扱い-](http://qiita.com/tomine3/items/1f6212a3a98f095ebabc)
[cloud9環境でReactの検証④ -ループ-](http://qiita.com/tomine3/items/ccffb50fad8d7e890379)
[Cloud9環境でReactの検証⑤ -Ajax、state管理-](http://qiita.com/tomine3/items/f817c62aa88d8a21df7d)