Anzeige Formularauswahl in Div in React

Question

Ich versuche, eine Benutzeroberfläche zu erstellen, die aktualisiert, wie der Client eine Option aus einem Dropdown-Menü auswählt. Ich habe versucht, dies wie folgt einzurichten: Ein React Parent (App), die zwei untergeordnete Komponenten (Inputs und Display) rendert. Inputs rendert ein Dropdown-Menüformular. Display rendert HTML-Ausgabe, die die in Input vorgenommene Auswahl anzeigt.

Beispiel unten:

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') 
); 

Ich erwarte, dass der Wert sich ändern, wenn der Client einen neuen Wert aus der Dropdown auswählt.

Grundsätzlich glaube ich, dass ich falsch verstehe, wie Zustände und Eigenschaften in React übergeben werden.

Answer 1

Da beide Komponenten Daten basierend auf Auswahlen wiedergeben sollen, sollte die App die Statusverwaltung ausführen und Daten als Requisiten an die einzelnen Komponenten übergeben.

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> 
     ) 
    } 
});