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

Question

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

Ant select 有一个名为 mode="multiple"

的属性

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

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

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