React - 将子下拉菜单状态传递给父

Question

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

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

   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”。

1. 让父级使用 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>
       );
   }
   

   });

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

Answer 1

你的第一种方法应该可以很好地进行一些更改

getInitialState 方法应该返回一个像这样的对象

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

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

选项 1

第二行this.props.onValueChange(this.state.value); 在设置状态后将不会执行，因此它将显示旧值。 setstate 定义看起来像这样

setState(function|object nextState[, function callback])

使用回调函数确保状态已设置，然后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
  });
},

选项 2

像这样发送e.target.value 而不是传递this.state.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/