React.js onChange 让父级知道改变的状态

Question

我有一个组件正在渲染 <select> 和 <option> 元素。当发生任何变化时，我想改变组件的状态以保持当前选择的选项的值。据我所知，我没有任何其他选择来保持这个值，因为 React JS 中的道具必须是不可变的。

当我通知家长更改时，问题就来了。我使用从 handleChange 到父 handleChange 函数的回调来执行此操作。所以在子元素中我实际上调用了 handleChange 函数，设置新状态并调用回调（父元素的 handleChange）。但是在父函数中，当我询问状态属性的值时，我收到了旧的（好像新的还没有设置）。

有什么想法吗？

Answer 1

我建议使用单一数据流模式（如 Flux or Reflux）来构建你的 React 应用程序，避免那种错误和复杂的反向数据流。

根据我对你的问题的理解，如果没有 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。

编辑2 更改了代码。您的问题可能是，如果您使用来自状态 (this.state.selectedOption) 的值调用父级的 handleChange，状态将不会被设置，因此您必须提供实际值作为参数。如果你真的想使用 this.state.selectedOption，请在 componentDidUpdate.

中调用父级的 handleChange

React.js onChange 让父级知道改变的状态

React.js onChange make the parent aware of the changed state

javascript

reactjs

parent

onchange