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

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

问题出现在我通知父母进行更改时。我使用从handleChange到父母的handleChange函数的回调来执行此操作。所以在子元素中，我实际上调用handleChange函数，设置新状态并调用回调函数（父项handleChange）。但是在父函数中，当我询问状态属性的值时，我会收到较老的一个（看起来像新的一个还没有设置）。

那么有什么想法？

来源

2015-04-06 Galya

需要代码.......... *在僵尸声音* – mccainz

我喜欢更多的理论方法来解决这个问题，这就是为什么我没有发布任何代码。否则可能会建议所有类型的非工作解决方案。 – Galya

我想你会发现，如果你可以将问题简化为一个非常基本的例子（并将其与你的问题一起呈现），那么你会得到比其他答案更好的答案。 – mccainz

我建议使用单一数据流模式（如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太多了。

编辑2 更改了代码。您的问题可能是，如果您使用来自状态（this.state.selectedOption）的值调用父级的handleChange，则状态将不会被设置，因此您必须将实际值作为参数。如果您真的想使用this.state.selectedOption，请拨打componentDidUpdate致电父母的handleChange。

来源

2015-04-06 20:33:32

当我没有将整个组件传递给父级（试图获取状态）而只传递值时，这实际上起作用。但在这方面，我还有一个问题。将当前所选值保存为组件的状态是否正确？ – Galya

编辑我的答案。我只是误解了你需要保持现状的地方 –

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

回答

相关问题