我正在尝试开发一个允许您创建多个下拉列表的应用程序。根据下拉列表的选择，会显示一些特定于上下文的 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> 
 ); 
} 

请您参考如下方法:

将回调传递给您的 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> 
 ); 
}