ReactJS UI Ant Design 下拉组件

Ant Design 是一个设计语言和 React UI 组件库，提供丰富的 UI 组件和基础样式，ReactJS UI Ant Design 下拉组件是其之一。

什么是 Ant Design 下拉组件？

Ant Design 下拉组件是一种常见的 UI 组件，它可以让用户选择一个选项，通常用于表单中。它有以下特点：

• 支持单选、多选、下拉框等显示形式
• 支持输入搜索、动态加载等高级用法
• 提供丰富的 API，支持自定义样式和事件处理

如何使用 Ant Design 下拉组件？

安装

使用 npm 安装：

npm install antd --save

使用

导入组件：

import { Select } from 'antd';
const { Option } = Select;

单选下拉框：

<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>
    Disabled
  </Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

多选下拉框：

<Select
  mode="multiple"
  style={{ width: '100%' }}
  placeholder="Please select"
  defaultValue={['a10', 'c12']}
  onChange={handleChange}
>
  {children}
</Select>

API

Select

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------ | ------ | | allowClear | 支持清除 | boolean | false | | autoFocus | 默认获取焦点 | boolean | false | | defaultValue | 指定默认选中的条目 | string | string[] | - | | disabled | 是否禁用 | boolean | false | | dropdownClassName | 下拉菜单的 className 属性 | string | - | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | | dropdownRender | 自定义下拉菜单 | function(originNode): ReactNode | 无 | | dropdownStyle | 下拉菜单的 style 属性 | object | - | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。当其为一个字符串时，会用这个字符串做为 value 进行简单的包含筛选 | boolean | function(inputValue, option) | string | false | true | | firstActiveValue | 默认高亮的选项 | string | - | | getPopupContainer | 菜单渲染父节点，默认渲染到 body 上 | function(trigger:Node)|HTMLElement | () => document.body | | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key:string,label:ReactNode} 的格式 | boolean | false | | maxTagCount | 最多显示多少个 tag | number | - | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \function(omittedValues) | - | | mode | 设置 Select 的模式为多选或标签选择 | 'multiple' | 'tags' | - | | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' | | optionFilterProp | 搜索时过滤对应的 option 属性 | string | 'value' | | optionLabelProp | 回填的 Option 的 value 的 key，用于自动填充 | string | 'value' | | placeholder | 选择框默认文字 | string | - | | showArrow | 是否显示下拉箭头 | boolean | true | | showSearch | 使单选模式可搜索 | boolean | false | | size | 选择框大小，可选 large small | string | default| | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | removeIcon | 自定义的清除图标 | ReactNode | - | | clearIcon | 自定义的清空图标 | ReactNode | - | | menuItemSelectedIcon | 选中项图标 | ReactNode | CheckOutlined | | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] | [] | | value | 指定当前选中的条目 | string | string[] | - | | onBlur | 失去焦点时的回调 | function | - | | onChange | 选中 option，或 input 的 value 变化(combobox 模式下)时，调用此函数 | function(value, option:Option|Option[], event) | - | | onDeselect | 取消选中时调用，参数为选中项的 value(labelInValue 模式下为选中项的 value 和 label) | function(value, option:Option) | - | | onFocus | 获得焦点时的回调 | function | - | | onInputKeyDown | 按键按下时的回调 | function(event) | - | | onMouseEnter | 鼠标移入时的回调 | function | - | | onMouseLeave | 鼠标移出时的回调 | function | - | | onPopupScroll | 下拉列表滚动时的回调函数 | function(event) | - | | onSearch | 文本框值变化时回调 | function(value:string) | - | | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) | - | | onDropdownVisibleChange| 下拉框出现/隐藏时回调 | function(open:boolean) | - | | filterSort | 自定义筛选时排序 | function(a,b,searchString:string) | - |

Option

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ---------------------------------- | ---------------------- | ------ | | disabled | 是否禁用 | boolean | false | | key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 值相同，然后可以省略 value 设置 | string | number | - | | title | 选项项组，自动判断是否应该渲染 group | string|ReactNode | - | | value | 默认根据此属性值进行筛选 | string | number| null | - | | className | Option 的类名 | string | - |

总结

ReactJS UI Ant Design 下拉组件提供了实用的下拉框 UI 组件，具有灵活的配置和扩展能力。通过本文介绍，希望能帮助大家更好的使用该组件。