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

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.

我正在尝试创建一个UI,当客户端从下拉菜单中选择一个选项时,该UI会更新。我试图按如下方式设置它:一个反应父(App),它呈现两个子组件(输入和显示)。输入呈现下拉菜单表单。显示呈现html输出,显示在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.

更基本的是,我认为我误解了React中状态和属性是如何传递的。

1 个解决方案

#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.

因为您希望两个组件根据选择呈现数据,所以应该让应用程序执行状态管理并将数据作为props传递给每个组件。

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