當第一個 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 成功。