如何在Ant Design ProForm中根据其他字段值计算填充字段？

你的核心问题是没有通过ProForm的Form实例统一管理字段状态，而是用独立的useState维护值，导致计算后的结果无法同步到表单组件中。ProForm的字段状态由内部Form实例管控，必须通过Form提供的方法修改字段值。

修复步骤： #

• 用useForm获取ProForm的Form实例，替代独立的useState存储字段值
• 通过form.getFieldValue获取其他字段的实时值，用于计算
• 计算完成后，调用form.setFieldValue直接更新nextDueDate字段的值

修改后的完整代码： #

import { ConfigProvider } from 'antd';
import enUS from 'antd/locale/en_US';
import { ProForm, ProFormDigit, ProFormSelect, ProFormDatePicker, useForm } from '@ant-design/pro-components';
import { useEffect } from 'react';

export default function App() {
  const form = useForm();

  const calculateDueDate = () => {
    const intervalDays = form.getFieldValue('interval');
    const unit = form.getFieldValue('kindOfDate');
    const lastDueDate = form.getFieldValue('lastDueDate');
    
    if (!intervalDays || !unit || !lastDueDate) return;

    const dueDate = new Date(lastDueDate);
    if (unit === "1") {
      dueDate.setDate(dueDate.getDate() + intervalDays);
    } else if (unit === "2") {
      dueDate.setMonth(dueDate.getMonth() + intervalDays);
    }
    // ProFormDatePicker支持直接传入Date类型，无需手动格式化字符串
    form.setFieldValue('nextDueDate', dueDate);
  };

  useEffect(() => {
    calculateDueDate();
  }, [form.getFieldValue('interval'), form.getFieldValue('kindOfDate'), form.getFieldValue('lastDueDate')]);

  return (
    <div className="App">
      <ConfigProvider locale={enUS}>
        <ProForm layout="horizontal" form={form}>
          <ProForm.Group>
            <ProFormDigit
              name="interval"
              label="Interval"
              width="sm"
            />
            <ProFormSelect
              name="kindOfDate"
              label="Unit"
              width="md"
              options={[
                {
                  value: "1",
                  label: "Day(s)"
                },
                {
                  value: "2",
                  label: "Month(s)"
                }
              ]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormDatePicker
              name="lastDueDate"
              label="Last Due Date"
            />
            <ProFormDatePicker
              name="nextDueDate"
              label="Next Due Date"
              disabled {/* 可选：禁用手动修改，确保值仅由计算生成 */}
            />
          </ProForm.Group>
        </ProForm>
      </ConfigProvider>
    </div>
  );
}

关键说明： #

• 移除了所有独立的useState，改用Form实例统一管理字段状态，避免手动同步的冗余和错误
• 计算时直接通过form.getFieldValue获取字段实时值，无需在onChange中手动维护状态
• 用form.setFieldValue更新nextDueDate，确保值能同步到ProFormDatePicker组件
• 可选给nextDueDate添加disabled属性，防止用户手动修改计算结果

内容的提问来源于stack exchange，提问作者Andish