React tutorial1-５

イベント連携 http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="app"></div>
<script type="text/babel">

     // 親：<Parent />の定義
     var Parent = React.createClass({
       // State（※状態は親が管理）
       // この値はブラウザを閉じたり、リロードするまでは保持される
       getInitialState: function () {
         return {
           textVal: "",
           children: []
         };
       },

       // State(textVal)を変更
       setStateTextVal: function(textVal) {
         this.setState({ textVal: textVal }); 
       },

       // State(children)を変更
       setStateChildren: function(textVal) {
         var textVals = this.state.children.concat(textVal);
         this.setState({ children: textVals });
       },

       // <Parent />の表示
       // ここで子となる<ChildInput />と<Child />を記述
       render: function() {
         return (
           <div>
             <p>入力してEnterキーを押す</p>
             <ChildInput onChange={this.setStateTextVal} onSave={this.setStateChildren} />
             <Child textVal={this.state.textVal} children={this.state.children} />
             <Child2 />
           </div>
         );
       }
     });

     // 子1：<ChildInput />の定義（※props経由で親を参照できる）
     var ChildInput = React.createClass({
       _onChange: function (e) {
         this.props.onChange(e.target.value);
       },

       _onKeyDown: function (e) {
         if (e.keyCode === 13) { // Enterキー
           this.props.onSave(e.target.value);
           e.target.value = "";
         }
       },

       // <ChildInput />の表示
       render: function() {
         return <input type="text" onChange={this._onChange} onKeyDown={this._onKeyDown} />;
       }
     });

     // 子2：<Child />の定義（※props経由で親を参照できる）
     var Child =...