ReactJS UI Ant Design Select 组件

Ant Design 是一套企业级的 UI 设计语言和 React 实现。Ant Design 的 React 实现提供了一系列 UI 组件，其中包括 Select 组件，是一个可以用于选择一个或多个条目的下拉菜单。

安装

通过 npm 安装：

npm install antd --save

导入

import { Select } from 'antd';

const { Option } = Select;

基本使用

<Select defaultValue="lucy" style={{ width: 120 }} onChange={(value) => console.log(`selected ${value}`)}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>
    Disabled
  </Option>
  <Option value="yiminghe">yiminghe</Option>
</Select>

API

Select 组件的常用 API 如下：

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | | defaultValue | 指定默认选中的条目 | string \| string[] \| number \| number[] | - | | value | 指定当前选中的条目 | string \| string[] \| number \| number[] | - | | placeholder | 选择框默认文字 | string | - | | onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | (value, option:Option \| Option[]) => void | - | | maxTagCount | 最多显示多少个 tag | number | - | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | (omittedValues) => React.ReactNode | - | | mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | 'default' | | allowClear | 支持清除, 单选模式有效 | boolean | false | | autoFocus | 默认获取焦点 | boolean | false | | disabled | 是否禁用 | boolean | false | | dropdownClassName | 下拉菜单的 className 属性 | string | - | | dropdownRender | 自定义 dropdown 渲染函数 | (originNode: ReactElement, props) => React.Node | - | | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue, option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。当其为一个字符串时时，会使用默认的判断逻辑 | boolean \| (inputValue: string, option: Option) => boolean | true | | loading | 加载中状态 | boolean | false | | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' | | onBlur | 失去焦点的回调 | () => void | - | | onFocus | 获得焦点的回调 | () => void | - | | onSearch | 文本框值变化时回调函数 | (value: string) => void | - | | size | 选择框大小 | 'large' \| 'middle' \| 'small' | 'middle' | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | removeIcon | 自定义的多选时选择框的删除图标 | ReactNode | - | | clearIcon | 自定义的清除图标 | ReactNode | - | | menuItemSelectedIcon | 自定义的下拉菜单已选择的图标，仅在 mode 为 'multiple' 或 'tags' 时有效 | ReactNode | <CheckOutlined /> | | optionFilterProp | 搜索时过滤对应的 option 属性 | string | 'value' | | showArrow | 是否显示下拉箭头 | boolean | true |

结语

通过使用 Ant Design 的 Select 组件，我们可以很便捷地实现下拉选择框的功能，提高企业级应用程序的用户体验。