Question

我正在尝试创建一个UI，当客户端从下拉菜单中选择一个选项时，该UI会更新。我试图按如下方式设置它：一个反应父（App），它呈现两个子组件（Inputs和Display）。 Inputs会显示一个下拉菜单表单。 Display呈现html输出，显示Input中所做的选择。

以下示例：

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

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

1 个答案: