反应-将子下拉菜单状态传递给父级

Question

我正在尝试设置一个使用React的页面。该页面有一个下拉菜单组件，它应该触发父级中的状态更新。我尝试了以下几个例子，但没有任何效果。以下是我尝试过的两种方法的简化示例：

>

将回调作为更新父状态的道具传递给子节点：

let Example = React.createClass({

getInitialState() {
    test: "fail"
},
_updateOnChange(value) {
    this.setState({test: value})
},
render() {
    return (<div><DropDown onValueChange=this._updateOnChange} />
    <p>{this.state.test}</p></div>);
}    
});

let DropDown = React.createClass({
getInitialState() {
    return { value: "fail" };
},
_onChangeHandler(e) {
    this.setState({value: e.target.value});
    this.props.onValueChange(this.state.value);
},

render() {
    return (
        <select onChange={this._onChangeHandler} value={this.state.value}>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    );
}

}）；

这始终显示“失败”，而不是“1”或“2”。

让父级使用onChange而不是回调获取下拉菜单的值。

let Example = React.createClass({
getInitialState() {
    test: "fail"
},
_updateOnChange(e) {
    this.setState({test: e.target.value})
},
render() {
   return (<DropDown onChange=this._updateOnChange} />);
}

}）；

let DropDown = React.createClass({
getInitialState() {
    return { value: "fail" };
},
_onChangeHandler(e) {
    this.setState({value: e.target.value});
},

render() {
    return (
        <select onChange={this._onChangeHandler} value={this.state.value}>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    );
}

}）；

如果我尝试渲染状态，我可以在下拉组件中看到状态更改，但父级没有更改。我做错了什么？

Answer 1

您的第一种方法应该可以很好地工作，但需要做一些更改

方法getInvalState应该返回这样的对象

getInitialState() {
  return { test: "fail" }
}

下拉组件中的_onChangeHandler有问题。有两种方法可以解决这个问题

第二行this.props.onValueChange（this.state.value） 将不会执行，因此它将显示旧值。setstate定义如下所示

setState（函数|对象nextState[，函数回调]）

使用回调函数确保已设置状态，然后执行this.prop

_onChangeHandler(e) {
  var self = this;
  this.setState({value: e.target.value}, function(){
    self.props.onValueChange(self.state.value); // <---- Makes sure that the state has been set at this stage
  });
},

不要传递this.state.value而是像这样发送e.target.value

_onChangeHandler(e) {
  this.setState({value: e.target.value});
  this.props.onValueChange(e.target.value); // <--- pass the value directly
},

这是一个演示https://jsfiddle.net/dhirajbodicherla/aqqcg1sa/4/