基于 umi 实现 ProFormSelect 下拉可自定义编辑组件

五号厂房
97 阅读6分钟

一、前言

在前端开发领域，umi 框架为构建各类应用提供了强大助力，结合 ProFormSelect 组件能创造出丰富多样的交互组件。此次，咱们深入剖析并基于已有代码进行拓展，打造更实用的下拉可自定义编辑组件。

二、Umi 项目搭建

Umi 作为一个可扩展的企业级前端应用框架，在蚂蚁集团内部已经已直接或间接地服务了 10000+ 应用。在工程实践的过程中，解决大量前端开发中开发中遇到的常见问题，这些经验累积成 Umi 各个插件。为了方便开发者更加方便的使用这些插件，在我们这些插件开源的基础上，直接将他们集成到一起，打造了 @umijs/max。 让开发者直接可以通过脚手架马上获得和蚂蚁集团开发 Umi 应用一样的开发体检。

如何使用

在使用 create-umi 选择 Ant Design Pro 模板，就能使用 @umijs/max 来创建项目了。这里我们选择 Ant Design Pro

$ npx create-umi@latest
? Pick Umi App Template › - Use arrow-keys. Return to submit.
    Simple App
❯   Ant Design Pro
    Vue Simple App

三、实现过程解析

完整代码如下：

import { PageContainer, ProFormSelect } from '@ant-design/pro-components';
const HomePage: React.FC = () => {
  // 1. 定义参数类型
  type Params = {
    keyWords: string
  }
  return (
    <PageContainer ghost>
      <ProFormSelect
        // 2. 为下拉框指定名称，方便表单处理时识别
        name="select2"
        // 3. 给下拉框添加一个描述性的标签文本，告知用户其功能
        label="支持搜索和自定义下拉查询的 Select"
        // 4. 开启搜索功能，让用户能够输入关键字查找选项
        showSearch
        // 5. 设置搜索防抖时间为 300 毫秒，避免频繁触发搜索请求，优化性能
        debounceTime={300}
        request={async ({ keyWords }: Params) => {
          let result = [
            { value: '520000201604258831', label: 'Patricia Lopez' },
            { value: '520000198509222123', label: 'Jose Martinez' },
            { value: '210000200811194757', label: 'Elizabeth Thomas' },
            { value: '530000198808222758', label: 'Scott Anderson' },
            { value: '500000198703236285', label: 'George Jackson' },
            { value: '610000199906148074', label: 'Linda Hernandez' },
            { value: '150000197210168659', label: 'Sandra Hall' },
          ]
          // 6. 当用户输入关键字不为空时，将用户输入的关键字也作为一个选项添加到结果中
          if (!!keyWords) {
            result.push({
              value: keyWords,
              label: keyWords,
            })
          }
          // 7. 返回结果数据供下拉框展示
          return result
        }}
        // 8. 设置下拉框未选择时的占位提示文本
        placeholder="Please select a country"
        // 9. 定义表单验证规则，要求用户必须选择一个选项，否则显示提示信息
        rules={[{ required: true, message: 'Please select your country!' }]}
      />
    </PageContainer>
  );
};
export default HomePage;

实现过程分析：

  1. 首先，通过 import 语句从 @ant-design/pro-components 库中引入了 PageContainer 和 ProFormSelect 组件。PageContainer 通常用于构建页面布局，提供一些通用的样式和结构，使得页面看起来更加规整；ProFormSelect 则是一个强大的表单选择组件，具备丰富的功能，是实现下拉选择及相关交互的核心。
  1. 定义了一个名为 HomePage 的函数式 React 组件，它遵循 React 的函数式组件定义规范，接收 props（这里未使用）并返回 JSX 元素。
  1. 在组件内部，定义了一个名为 Params 的类型别名，用于明确 request 函数所接受参数的类型，这里的参数 keyWords 预期是一个字符串，用于接收用户在搜索框中输入的关键字。
  1. 在 return 语句中：
  • 使用 PageContainer 组件包裹 ProFormSelect 组件，ghost 属性可能是用于设置 PageContainer 的某种特定样式，例如透明背景或极简风格，具体取决于 @ant-design/pro-components 库的实现，它为内部的 ProFormSelect 组件提供了一个整体的布局框架。
  • 对于 ProFormSelect 组件：
  • name="select2"：为下拉框赋予了一个唯一标识，在表单提交或与后端交互时，如果需要识别这个下拉框所对应的数据，就可以通过这个名称来引用，方便进行数据处理。
  • label="支持搜索和自定义下拉查询的 Select"：在页面上显示一个清晰的标签文本，告知用户这个下拉框具备搜索功能以及可以进行自定义的下拉查询操作，增强了界面的可理解性，引导用户正确使用。
  • showSearch：这一属性的设置开启了搜索功能，当用户在下拉框附近的输入框中输入字符时，组件会自动触发搜索行为，帮助用户快速找到他们想要的选项。
  • debounceTime={300}：考虑到用户在输入搜索关键字时可能会快速连续敲击键盘，如果每次按键都立即触发搜索请求，会给服务器带来较大压力并且可能导致结果频繁更新，影响用户体验。设置 debounceTime 为 300 毫秒后，组件会在用户停止输入 300 毫秒后才发起搜索请求，有效避免了上述问题，优化了性能。
  • request 函数：这是一个异步函数，用于根据用户输入的关键字动态获取下拉选项数据。首先，它初始化了一个包含若干预设选项的数组 result，这些预设选项以对象形式存在，每个对象包含 value（选项的值，通常在表单提交时使用）和 label（选项显示的文本，用户在界面上看到的内容）两个属性。接着，当用户输入了关键字（通过解构赋值获取到 keyWords），并且关键字不为空字符串时，将用户输入的关键字作为一个新的选项添加到 result 数组中，最后返回这个数组，以便 ProFormSelect 组件根据返回的数据展示下拉选项。
  • placeholder="Please select a country"：当下拉框尚未被选择，且用户未开始输入搜索内容时，显示的一段占位提示文本，这里提示用户选择一个国家，给用户一个操作引导，避免界面空白造成的困惑。
  • rules：定义了表单验证规则，这里使用了一个包含单个对象的数组，对象中的 required 属性设置为 true，表示这个下拉框是必填项，同时 message 属性指定了如果用户未选择任何选项时要显示的提示信息，即 “Please select your country!”，强制用户必须做出选择，保证表单数据的完整性。
avatar
文章
阅读
粉丝