I am new to ReactJS
. I have used AntJS
select in my ReactJS
project. I have two select
in HTML
. When the first select
is selected, its relative dropdown will be loaded in the second select
.
When the user chooses the option in the first select
, the second select
will load its contents.
It was working great. Now my issue was " When I choose an option in second select
, it is there in the second select box
. But When I changed the option in the first select
, the already chosen option in the second select
is still there, but the drop-down content in the second select
has changed.
My Issue in UI View: How to clear the selected content in the second select
box when the first select
option has changed". I have tried so far. I don't how to make it possible. Help me with some solutions.
Code:
WAAccountNameChange(value){
this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] })
}
First Select:
<Select " onChange= {(value) => { this.WAAccountNameChange(value)}} >
{this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>
Second 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>
On the change of first select menu clear the value of second select box. If you retrieve data from API than clear state on API success.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.