深入剖析 ProTable 模糊搜索代码及其改写

五号厂房
258 阅读3分钟

深入剖析 ProTable 模糊搜索代码及其改写

接下来，我们将深入解析一段利用 ProTable 和 AutoComplete 组件实现模糊搜索的代码，帮助大家更好地理解其中的奥秘。

一、代码解析

这段代码主要基于 React 框架进行编写，旨在实现一个带有模糊搜索功能的表格页面。

首先映入眼帘的是一系列的导入语句：

import React, { useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { AutoComplete } from 'antd';
import debounce from 'lodash/debounce';

这里引入了 React 核心库以及用于状态管理的 useState 钩子函数，ProTable 是一款功能强大、高度可定制的表格组件，能满足复杂的数据展示需求；AutoComplete 组件来自 antd 库，可为用户输入提供自动完成的提示功能，大大提高输入效率；而 debounce 函数则是从 lodash 库引入，用于对频繁触发的函数进行防抖处理，避免因用户快速输入导致过多不必要的请求。

接着定义了一个模拟获取场景名称列表的函数 getSceneNameList：

const getSceneNameList = async ({ sceneName }) => {
  return [
    { datasetName: `${sceneName} 结果 1` },
    { datasetName: `${sceneName} 结果 2` },
  ];
};

在实际应用中，此函数应替换为真实的 API 请求，向服务器端获取与用户输入场景名称相关的数据。当前只是简单模拟返回两个包含输入关键词的结果，用于演示后续流程。

随后是组件定义部分：

const FuzzySearchTable = () => {
  const [searchValue, setSearchValue] = useState('');
  const [sceneOptions, setSceneOptions] = useState([
    { label: '常用场景 1', value: '常用场景 1' },
    { label: '常用场景 2', value: '常用场景 2' },
  ]);

在 FuzzySearchTable 组件内部，利用 useState 初始化了两个状态变量。searchValue 用于存储用户在搜索框（由 AutoComplete 组件呈现）内输入的文本，以便后续根据此值进行搜索操作；sceneOptions 则用于保存 AutoComplete 组件下拉菜单中的可选项目，初始化为两个简单的常用场景，避免用户首次输入时下拉菜单为空，提供更好的初始体验。

然后是防抖处理后的搜索函数：

  const debouncedSearch = debounce(async (text) => {
    try {
      let result = (await getSceneNameList({ sceneName: text })) || [];
      setSceneOptions(
        result.map((v) => {
          return { label: v.datasetName, value: v.datasetName };
        }),
      );
    } catch (error) {
      console.error('搜索出错：', error);
      alert('搜索出现问题，请稍后重试');
    }
  }, 300);

debouncedSearch 函数运用了 debounce 进行防抖，用户输入文本触发搜索时，延迟 300 毫秒执行实际搜索逻辑。在函数内部，先尝试调用 getSceneNameList 获取数据，若成功则根据返回结果更新 sceneOptions，将数据格式化为 AutoComplete 所需的 label 和 value 形式；若出现错误，在控制台记录错误信息，并向用户弹出提示框告知搜索出现问题。

最后是组件的返回结构：

  return (
    <ProTable
      columns={[
        {
          title: 'ID',
          dataIndex: 'id',
          width: 100,
        },
        {
          title: '名称',
          dataIndex: 'datasetName',
          width: 150,
          renderFormItem: (_, { fieldProps }) => {
            return (
              <AutoComplete
                placeholder={'名称'}
                onChange={(e) => setSearchValue(e.target.value)}
                {...fieldProps}
                options={sceneOptions}
                onSearch={debouncedSearch}
              />
            );
          },
        },
      ]}
      request={async (params) => {
        const { data } = await Promise.resolve({
          data: [
            { id: 1, datasetName: '示例数据 1' },
            { id: 2, datasetName: '示例数据 2' },
          ],
          success: true,
          });
        return {
          data: data,
          success: true,
          }
        };
      }
    />
  );
};
export default FuzzySearchTable;

这里 ProTable 组件是核心展示区域，columns 定义了表格的列结构，包含“ID”列和“名称”列。重点关注“名称”列，通过 renderFormItem 方法渲染了 AutoComplete 组件，为用户在编辑该列时提供自动完成功能。它绑定了 placeholder 作为占位提示，onChange 实时更新 searchValue，options 关联了动态更新的 sceneOptions，onSearch 触发防抖搜索函数。同时，ProTable 的 request 函数模拟了向后端请求数据的过程，目前只是简单返回固定的示例数据，实际项目中需依据真实接口改造。

avatar
文章
阅读
粉丝