论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 配合请求参数
相关推荐
hahala23337 分钟前
ESLint 提交前校验技术方案
前端
夕水29 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了32 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder39 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin932 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端