我有一个正在渲染的组件< select>与<选项>元素.当发生任何更改时,我想更改组件的状态以保留当前所选选项的值.据我所知,由于React JS中的道具必须是不可变的,因此我没有任何其他选择来保持这个值.

当我通知父母进行更改时,问题就来了.我使用从handleChange到parent的handleChangefunction的回调来执行此操作.所以在子元素中我实际上调用了handleChangefunction,设置了新状态并调用了回调(parent的handleChange).但是当我在父函数中询问状态属性的值时,我会收到较旧的一个(似乎新的一个仍未设置).

那么任何想法？

解决方法:

我建议使用单个数据流模式(如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中调用parent的handleChange.