论Ant Design ProTable 中如何优雅设置搜索框默认值

最近做的几个项目都需要在项目中回显数据,刚好我用的就是Ant Design 的ProTable,官方并没有很明确例子和说明如何去做,有以下几个关键点是要注意的。以下是优化后的解决方案及代码说明:

一、问题原因分析

  1. formRef 初始化问题:未正确初始化 useRef 导致引用为空
  2. 时间格式问题:直接使用字符串而非 moment 对象
  3. 执行时机问题:表单未完全初始化时设置值

优化后的解决方案

jsx 复制代码
import React, { useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import moment from 'moment';

const columns = [
  {
    title: '时间周期',
    dataIndex: 'created_at',
    valueType: 'dateTimeRange',
    hideInTable: true,
    search: {
      transform: (value) => ({
        start_time: value?.[0],
        end_time: value?.[1],
      }),
    },
  },
];

export default () => {
  const formRef = useRef(null); // 正确初始化 ref
  
  // 使用 moment 对象作为默认值
  const defaultTimeRange = [
    moment().startOf('month'),
    moment().endOf('month')
  ];

  useEffect(() => {
    // 添加空依赖确保只执行一次
    if (formRef.current) {
      // 先设置表单值
      formRef.current.setFieldsValue({
        created_at: defaultTimeRange,
      });
      
      // 延迟提交确保表单渲染完成
      setTimeout(() => {
        formRef.current.submit();
      }, 0);
    }
  }, []); // 空依赖数组确保只运行一次

  return (
    <ProTable
      columns={columns}
      request={getList}
      rowKey="id"
      formRef={formRef}
      search={{
        optionRender: (searchConfig, formProps, dom) => [
          <div key="submit">自定义搜索按钮</div>,
        ],
      }}
    />
  );
};

二、关键改进说明

  1. 正确初始化 ref

    jsx 复制代码
    const formRef = useRef(null);
  2. 使用 moment 对象

    jsx 复制代码
    moment().startOf('month') // 返回 moment 对象
  3. 合理的执行时机控制 • 使用 setTimeout 确保表单渲染完成

    • 空依赖的 useEffect 确保初始化逻辑只执行一次

  4. 推荐使用异步初始化

    jsx 复制代码
    useEffect(() => {
      const timer = setTimeout(() => {
        if (formRef.current) {
          formRef.current.setFieldsValue({
            created_at: defaultTimeRange,
          });
        }
      }, 100);
      
      return () => clearTimeout(timer);
    }, []);

三、其他注意事项

  1. 如果遇到表单值不更新,尝试使用 formRef.current.resetFields() 重置表单
  2. 确保服务端接口能正确处理时间范围参数
  3. 对于复杂场景,建议使用 initialValues 配合请求参数
相关推荐
闲蛋小超人笑嘻嘻5 分钟前
前端面试六之axios
前端
万少9 分钟前
我们又来啦 又又上架了一个鸿蒙项目-萤火故事屋
前端·harmonyos·客户端
江城开朗的豌豆27 分钟前
HTML5 datalist:让你的输入框拥有'读心术'的超能力!
前端·javascript·面试
江城开朗的豌豆29 分钟前
事件绑定三件套:从onclick到addEventListener的进化史
前端·javascript·面试
小满zs3 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon4 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn6 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友7 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程8 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅8 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts