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

Question

我正在使用antd select来实现多选组件。

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

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

antd选择是否有任何属性以清除所有选择？

Answer 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>
  );
}