在React中的div中显示表单选择

Question

I am trying to create a UI that updates as the client selects an option from a dropdown menu. I've tried to set this up as follows: A react Parent ( App ) that renders two child components ( Inputs and Display ). Inputs renders a dropdown menu form. Display renders html output that displays the selection made in Input .

Example below:

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

I expect the value to change when the client selects a new value from the dropdown.

More fundamentally, I think I'm misunderstanding how states and properties are passed in React.

Answer 1

Because you want both of the components to render data based on selections you should let the App do the state management and pass data as props to each one.

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