当第一个 select 选项更改时清除 select 框中的内容 - reactJS

Question

我是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：

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

第二个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>

Answer 1

在更改第一个 select 菜单时，清除第二个 select 框的值。 如果您从 API 检索数据比清除 state API 成功。