如何在按钮单击时删除 Antd 选择/多选组件中的选定值答案

【问题标题】：How to remove selected values in Antd select/Multiselect component on button click如何在按钮单击时删除 Antd 选择/多选组件中的选定值
【发布时间】：2019-07-17 11:14:10
【问题描述】：

我使用antdselect 来实现多选组件。

Ant select 有一个名为 mode="multiple" 的属性

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

antd 是否有任何属性可以清除所有已完成的选择？

【问题讨论】：

标签： javascript reactjs select multi-select antd

【解决方案1】：

您可以使用Select 的allowClear 属性，它会在悬停选择框时添加一个清晰的图标。

如果需要实现清除按钮，需要自己实现，对于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>
  );
}

【讨论】：

我不得不做一些重构，但这行得通。谢谢。 [是]