how to clear antd select items programmatically
Just set value to null. e.g.
<Select value={null} />
If you are using React Hooks, use the following:
import React, { useState } from 'react'
import { Button, Select } from 'antd'
const { Option } = Select
// inside your component
const ComponentName = () => {
const [selected, setSelected] = useState()
// handler
const clearSelected = () => {
// this line will clear the select
// when you click on the button
setSelected(null)
}
// in the return value
return (
<>
// ...
// In the select element
<Select style={{ width: 150 }} onChange={value => setSelected(value)}
value={selected}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>
<Button onClick={clearSelected}>Clear Selected</Button>
</>
)
}
Try this
class Banana extends React.Component {
constructor() {
super();
this.state = {
selected: []
};
this.handleChange = this.handleChange.bind(this);
this.clearSelected = this.clearSelected.bind(this);
}
handleChange(value) {
this.setState({ selected: value });
}
clearSelected() {
this.setState({ selected: []});
}
render() {
return (
<div>
<Select value={this.state.selected} style={{ width: 120 }} onChange={this.handleChange} placeholder="Select option">
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Button onClick={this.clearSelected}>clear selected</Button>
</div>
);
}
}