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

我有一个组件正在使用

元素呈现

。当发生任何更改时，我希望更改组件的状态以保留当前选定选项的值。据我所知，我没有任何其他选择来保持这个值，因为React JS中的道具必须是不可变的

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

当我通知家长进行更改时，问题就出现了。我使用从

handleChange

回调到父级的

handleChange

函数来实现这一点。因此，在子元素中，我实际上调用了

handleChange

函数，设置新状态并调用回调（父元素的

handleChange

）。但是在父函数中，当我询问state属性的值时，我收到了旧的属性（似乎新的属性还没有设置）

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

---

有什么想法吗？

我建议使用单一的数据流模式（如或）来构建react应用程序，避免此类错误和复杂的反向数据流

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

从我对你的问题的理解来看，没有变化，你可以这样做

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

var React=require（“React”）；
var ParentComponent=React.createClass({
handleChange:函数（新选项）{
log（“子组件中的选项更改为“+newOption”）；
},
render:function（）{
返回(
)
}
});
var ChildComponent=React.createClass({
getInitialState:函数（）{
返回{
已选择的选项：0
};
},
handleChange:function（）{
var option=this.refs.select.getDOMNode（）.value；
this.setState（{selectedOption:option}）；
//我将实际值作为参数传递，
//不是这个.state.selectedOption
//如果要这样做，请在componentDidUpdate中进行
//那么状态就已经设置好了
此.props.handleChange（选项）；
},
render:function（）{
返回(
我的选择
{this.state.selectedOption}
1.
2.
3.
)
}
});

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

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

Edit2

---

更改了代码。您的问题可能是，如果使用状态（

this.state.selectedOption

）中的值调用父对象的handleChange，则状态尚未设置，因此您必须将实际值作为参数。如果确实要使用

此.state.selectedOption

，请在中调用家长的

handleChange

。

需要代码。。。。。。。。。。在《僵尸之声》中，我更喜欢用理论的方法来回答这个问题，这就是为什么我没有发布任何代码。否则，可能会建议所有类型的无效解决方案。我想你会发现，如果你能将问题简化为一个非常基本的示例（并将其与你的问题一起呈现），你将得到比其他情况更好的答案。当我不将整个组件传递给家长（试图获得状态）时，这实际上是有效的但只有价值。但在这方面，我还有一个问题。将当前选定的值保存为组件状态是否正确？编辑了我的答案。我只是误解了你需要保持现状的地方

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