javascript - ReactJS:如何从子组件的下拉列表中获取选择/状态？

Question

我正在尝试开发一个允许您创建多个下拉列表的应用程序。根据下拉列表的选择，会显示一些特定于上下文的 list 。在页面底部，我希望有 (((one))) 按钮来将所有选中的项目和下拉列表中的 selectedValue 提交到 Web 服务。

问题是，我不知道如何将 selectedValue 的状态提升到包含所有下拉菜单和提交按钮的父组件。

这是我的顶级组件中的 render() 方法，如果您还不清楚的话，我认为它可以让您了解我希望页面的外观:

render(){
 let dropDownValues = this.state.dropDownValues;
 let dropDowns = [];
 for (let i=0; i<this.state.counter;i++){
    dropDowns.push(<DropDown key={i} values={dropDownValues} />
 }

 return(
     <div>
        {dropDowns}
        <button onClick={()=>this.addDropDown()}>+</button>
        <button onClick={()=>this.removeDropDown()}>-</button>
        <form method="post" onsubmit={this.postToWebservice(allTheStuffFromTheDropDownsContext)}>
       <input type="submit" value="Submit Request To WebService"
        </form>
     </div>
 );
}

Answer 1

将回调传递给您的 DropDown 组件。因此，如果选中项目，将调用回调，并且您的顶级组件可以处理此问题。

dropDownSelected(selected) {
  this.state.selectedValue = ...
}
render(){
 let dropDownValues = this.state.dropDownValues;
 let dropDowns = [];
 for (let i=0; i<this.state.counter;i++){
    dropDowns.push(<DropDown key={i} values={dropDownValues} onDropDownSelected={this.dropDownSelected.bind(this)} />
 }

 return(
     <div>
        {dropDowns}
        <button onClick={()=>this.addDropDown()}>+</button>
        <button onClick={()=>this.removeDropDown()}>-</button>
        <form method="post" onsubmit={this.postToWebservice(allTheStuffFromTheDropDownsContext)}>
       <input type="submit" value="Submit Request To WebService"
        </form>
     </div>
 );
}