Ant Design如何做到单击即可清除下拉选择的内容？

2024-02-20 21:09:53

正文

Ant Design作为一款流行的UI组件库，为构建优雅的web界面提供了许多方便的组件，其中Select组件可以帮助我们轻松实现下拉选择功能。在很多场景下，我们可能希望用户在单击后即可清除Select组件中选中的内容，以方便他们快速更改选择或纠正错误。Ant Design为我们提供了多种方法来实现这一需求，本文将一一介绍。

单选清除

对于单选Select组件，我们可以使用allowClear属性来实现单击清除功能。allowClear属性是一个布尔值，如果设置为true，则会在Select组件的右侧显示一个清除按钮。当用户单击此按钮时，Select组件中选中的内容将被清除。

<Select allowClear>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="tom">Tom</Option>
</Select>

多选清除

对于多选Select组件，我们可以使用showClear属性来实现单击清除功能。showClear属性也是一个布尔值，如果设置为true，则会在Select组件的右侧显示一个清除按钮。当用户单击此按钮时，Select组件中选中的所有内容将被清除。

<Select mode="multiple" showClear>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="tom">Tom</Option>
</Select>

自定义清除按钮

如果我们希望自定义清除按钮的外观或行为，我们可以使用clearIcon属性。clearIcon属性可以是一个React组件或一个字符串，如果是一个React组件，则该组件将被渲染为清除按钮；如果是一个字符串，则该字符串将被用作清除按钮的图标。

const clearIcon = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-x-lg" viewBox="0 0 16 16">
  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>;

<Select clearIcon={clearIcon}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="tom">Tom</Option>
</Select>