Question

我有一个使用<select>元素呈现<option>的组件。当发生任何更改时，我想更改组件的状态以保留当前所选选项的值。据我所知，由于React JS中的道具必须是不可变的，因此我没有任何其他替代方法可以保留此值。

当我通知家长进行更改时，问题就来了。我使用从handleChange到父{h} handleChange函数的回调来执行此操作。所以在子元素中我实际上调用了handleChange函数，设置了新状态并调用了回调（parent {＃1;} handleChange）。但是在父函数中，当我询问状态属性的值时，我会收到旧的属性（似乎新的一个仍未设置）。

所有想法？

Answer 1

我建议使用单一数据流模式（如Flux或Reflux）来构建您的反应应用程序，避免出现这种错误和复杂的反向数据流。

根据我对你的问题的理解，没有Flux，你可以做这样的事情。

var React = require("react");

var ParentComponent = React.createClass({
    handleChange: function(newOption){
        console.log("option in child component changed to " + newOption);
    },
    render: function(){
        return (
            <div>
                <ChildComponent handleChange={this.handleChange}/>
            </div>
        )
    }
});

var ChildComponent = React.createClass({
    getInitialState: function(){
        return {
            selectedOption: 0
        };
    },
    handleChange: function(){
        var option = this.refs.select.getDOMNode().value;
        this.setState({ selectedOption: option});
        // I'm passing the actual value as an argument,
        // not this.state.selectedOption
        // If you want to do that, do it in componentDidUpdate
        // then the state will have been set
        this.props.handleChange(option);
    },
    render: function(){
        return (
            <div>
                <h4>My Select</h4>
                {this.state.selectedOption}
                <select ref="select"
                        onChange={this.handleChange}>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        )
    }
});

修改添加了几个被遗忘的分号。我这些天编写的Python太多了。

<强> EDIT2 更改了代码。您的问题可能是，如果使用状态（this.state.selectedOption）中的值调用父级的handleChange，则状态将不会设置，因此您必须将实际值作为参数。如果您确实想使用this.state.selectedOption，请在componentDidUpdate中致电父母handleChange。

React.js onChange使父级知道已更改的状态

1 个答案: