リアクションのdivでフォームの選択を表示

Question

クライアントがドロップダウンメニューからオプションを選択すると更新するUIを作成しようとしています。これを次のように設定しようとしました：2つの子コンポーネント（InputsとDisplay）をレンダリングする反応親（App）。 Inputsは、ドロップダウンメニューフォームをレンダリングします。 Displayは、Inputで行われた選択を表示するhtml出力をレンダリングします。以下

例：

var Inputs=React.createClass({ 
    getInitialState: function() { 
     return {value: 'cat'} 
    }, 
    handleChange: function() { 
     this.setState({value: event.target.value}) 
    }, 
    render: function() { 
     return (
      <div> 
       <form> 
        <select value={this.state.value} 
         onChange={this.handleChange}> 
         <option value='cat'> Cat </option> 
         <option value='dog'> Dog </option> 
        </select> 
       </form> 
      </div> 
     ) 
    } 
}) 

var Display=React.createClass({ 
    render: function(){ 
     return (
      <div> 
       <b> {this.props.l1} </b> 
      </div> 
     ) 
    } 
}) 

var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <Inputs ref="inputs" /> 
       <Display l1={this.refs.inputs.state.value} /> 
      </div> 
     ) 
    } 
}) 

ReactDOM.render(
<App />, 
document.getElementById('app') 
); 

私は、クライアントがドロップダウンから新しい値を選択したときに値が変化することを期待しています。

もっと基本的に、私は状態とプロパティがReactでどのように受け継がれているのか誤解していると思います。

Answer 1

選択に基づいて両方のコンポーネントにデータを表示させるためには、アプリケーションに状態管理を行い、データをそれぞれに渡す必要があります。

var App = React.createClass({ 
    getInitialState: function() { 
     return {value: 'cat'}; 
    }, 
    handleChange: function(e) { 
     e.preventDefault(); 
     this.setState({value: e.target.value}); 
    }, 
    render: function() { 
     return (
      <div> 
       <Inputs value={this.state.value} onChange={this.handleChange} /> 
       <Display l1={this.state.value} /> 
      </div> 
     ) 
    } 
}); 

var Inputs = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <form> 
        <select value={this.props.value} 
         onChange={this.props.onChange}> 
         <option value='cat'> Cat </option> 
         <option value='dog'> Dog </option> 
        </select> 
       </form> 
      </div> 
     ) 
    } 
});