如何在单击按钮时删除 Antd select/Multiselect 组件中的选定值

Question

我正在使用 antdselect 来实现多个 select 组件。

Ant select 有一个属性叫做 mode="multiple"

我想在按下清除调用按钮时清除多 select 组件上的所有 selected 输入。

antdselect是否有属性清除所有select离子完成？

Answer 1

您可以使用 Select 的 allowClear 属性，这将在悬停 select 框时添加一个清晰的图标。

如需实现清空按钮，需自行实现，example:

const N = 30;
const children = [...Array(N).keys()].map(key => (
  <Select.Option key={key}>{key}</Select.Option>
));

export default function App() {
  const [selectedValues, setSelectedValues] = useState([]);
  return (
    <FlexBox>
      <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder="Please select"
        allowClear
        value={selectedValues}
        onChange={e => setSelectedValues(e)}
      >
        {children}
      </Select>
      <Button type="danger" onClick={() => setSelectedValues([])}>
        Clear Selected
      </Button>
    </FlexBox>
  );
}

如何在单击按钮时删除 Antd select/Multiselect 组件中的选定值

How to remove selected values in Antd select/Multiselect component on button click

javascript

reactjs

select

multi-select

antd