第一次选择选项更改时清除选择框中的内容 - reactJS答案

【问题标题】：Clear content in select box when first select option changed - reactJS第一次选择选项更改时清除选择框中的内容 - reactJS
【发布时间】：2020-04-01 09:37:12
【问题描述】：

我是ReactJS 的新手。我在我的ReactJS 项目中使用了AntJS select。我在HTML 中有两个select。当first select被选中时，它的相关下拉列表将被加载到second select中。

用户界面视图：

当用户选择first select中的选项时，second select会加载其内容。

效果很好。现在我的问题是“当我在second select 中选择一个选项时，它在second select box 中。但是当我更改first select 中的选项时，second select 中已经选择的选项仍然存在，但是second select中的下拉内容发生了变化。

我在 UI 视图中的问题：当first select选项发生变化时，如何清除second select框中选中的内容”。我已经尝试过了。我不知道如何使它成为可能。帮我解决一些问题。

代码：

WAAccountNameChange(value){  
        this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] }) 
    }

首先选择：

<Select  " onChange= {(value) => { this.WAAccountNameChange(value)}} >
    {this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

第二次选择：

<Select  defaultValue={this.state.selectedValue}  onChange= {(value) => { this.setState({ selectedValue: value })} } >
    {this.state.waWebsiteList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

【问题讨论】：

尝试为第二个Select添加一个defaultValue属性，并将其设置为selectedValue状态，并在第一个Select改变时重置选择值
我试过这样。我没有工作..second select 中的值仍然存在
当第一个 Select 改变时重置选中的值
在第一次select的onChange中，设置selectedValue为空
是的，我已经设置好了，this.setState({selectedValue:""})。但它仍然显示

标签： javascript html css node.js reactjs

【解决方案1】：

在更改第一个选择菜单时，清除第二个选择框的值。如果您从 API 检索数据而不是清除 API 成功状态。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。