コンポーネント内のコンポーネントがバニラJSと反応する

Question

運命の意志によって、私はreact.jsでES3 standradだけを使用して作業する必要があります。だから、jsx、クラスと他のもの。
React.createClassとReact.createElementの使用入力フィールドの上のラベルに入力テキストを反映する対話型入力コンポーネントを作成しました。
このためのコードは以下の通りです：

requirejs.config({ 
    // module name mapped to CDN url 
    paths: { 
     // Require.js appends `.js` extension for you 
     'react': 'https://unpkg.com/react@15.3.2/dist/react', 
     'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom' 
    } 
}); 

requirejs(['react', 'react-dom'], function(React, ReactDOM) { 
     'use strict'; 
     var Input; 
     var cr, root; 
     cr = React.createElement; 

     Input = React.createClass({ 
     displayName: 'Input', 

     getInitialState: function getInitialState() {return {typed: ''};}, 

     onChange: function onChange(event) { 
      this.setState({typed: event.target.value}); 
     }, 

     render: function render() { 
      return cr('div', null, 
      cr('div', null, '=>' + this.state.typed), 
      cr('input', { type: 'text', onChange: this.onChange.bind(this)}) 
      ); 
      } 
     }); 

     root = Input; 
     var app = document.getElementById('app'); 
     ReactDOM.render(cr(root, null), app); 
}); 

が、今、私は内部の二つの入力コンポーネントと新しいコンポーネントを作成しようとしています：

InputBlock = React.createClass({ 
    displayName: 'InputBlock', 
    render: function render() { 
     return cr('div', null, 
     cr('Input', null), 
     cr('Input', null) 
     ); 
     } 
    }); 

そして、私は2つの要素を参照してくださいすることが期待しました動的な振る舞いですが、2つの単純な入力フィールドしか得られません：

私は明らかに何かが間違っていることを理解していますが、 react.jsで新しいですし、まだ全体の画像を見ることはできません。 お願いします。

最終的なコードの完全な実装

requirejs.config({ 
    // module name mapped to CDN url 
    paths: { 
     // Require.js appends `.js` extension for you 
     'react': 'https://unpkg.com/react@15.3.2/dist/react', 
     'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom' 
    } 
}); 

requirejs(['react', 'react-dom'], function(React, ReactDOM) { 
     'use strict'; 
     var Input, InputBlock; 
     var cr, root; 
     cr = React.createElement; 

     Input = React.createClass({ 
     displayName: 'Input', 

     getInitialState: function getInitialState() {return {typed: ''};}, 

     onChange: function onChange(event) { 
      this.setState({typed: event.target.value}); 
     }, 

     render: function render() { 
      return cr('div', null, 
      cr('div', null, '=>' + this.state.typed), 
      cr('input', { type: 'text', onChange: this.onChange.bind(this)}) 
      ); 
      } 
     }); 

     InputBlock = React.createClass({ 
     displayName: 'InputBlock', 
     render: function render() { 
      return cr('div', null, 
      cr('Input', null), 
      cr('Input', null) 
      ); 
      } 
     }); 

     root = InputBlock; 
     var app = document.getElementById('app'); 
     ReactDOM.render(React.createElement(root, null), app); 
}); 

Answer 1

あなたは、入力の前後に引用符を持っている必要はありません。文字列として、組み込みの入力を使用していますが、カスタムコンポーネントが必要です。このコードはInputBlockで動作するはずです：

InputBlock = React.createClass({ 
    displayName: 'InputBlock', 
    render: function render() { 
    return cr('div', null, 
     cr(Input, null), 
     cr(Input, null) 
    ); 
    } 
});