论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 配合请求参数
相关推荐
展程1 分钟前
重构shi山工程,却遇到全局的1000+ts问题...
前端
凌晨两点的菜鸡2 分钟前
前端部署-CICD
前端·nginx
林太白13 分钟前
NestJS-字典类型模块
前端·javascript·nestjs
林太白16 分钟前
NestJS-字典数据模块
前端·javascript·nestjs
林太白25 分钟前
Rust搜索优化
前端·后端·rust
用户38022585982433 分钟前
vue3源码解析:编译之解析器实现原理
前端·vue.js·源码阅读
Ygrowly34 分钟前
搭建 Mock 服务,实现前端自调
前端
火车叼位38 分钟前
threejs api速查表, 你的下一个鼠标垫图案素材
前端·api·three.js
铃铃六41 分钟前
typescript中tpye和interface的区别
前端·typescript
页面魔术43 分钟前
🔥来听听尤雨溪是怎么亲述无虚拟dom的吧
前端·vue.js·前端框架