Antd ProV5 设置ProForm选项值-formRef

最新推荐文章于 2025-06-09 09:04:49 发布

原创最新推荐文章于 2025-06-09 09:04:49 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ant design

React_AntD 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用AntdPro V5中的ProForm组件实现表单的一键填充功能，并展示了如何通过formRef获取和设置表单项的值。此外，还提供了获取格式化数据及校验表单的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Antd ProV5 设置ProForm选项值（场景：select选项涉及联动，onchange时要把子联动value清空）

关键点：formRef

ProForm - 高级表单 - ProComponents🏆 让中后台开发更简单包含 table form 等多个组件。https://procomponents.ant.design/components/form#formref

主要看'一键填写'onFill ，setFieldsValue某一项的值。

import React, { useRef } from 'react';
import { message, Button } from 'antd';
import type { ProFormInstance } from '@ant-design/pro-form';
import { ProFormDatePicker } from '@ant-design/pro-form';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import moment from 'moment';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const formRef = useRef<ProFormInstance>();

  const onFill = () => {
    formRef?.current?.setFieldsValue({
      name: '张三',
      company: '蚂蚁金服',
    });
  };

  const getCompanyName = () => {
    message.info(`公司名称为 "${formRef?.current?.getFieldValue('company')}"`);
  };

  const getFormatValues = () => {
    console.log('格式化后的所有数据：', formRef.current?.getFieldsFormatValue?.());
  };

  const validateAndGetFormatValue = () => {
    formRef.current?.validateFieldsReturnFormatValue?.().then((values) => {
      console.log('校验表单并返回格式化后的所有数据：', values);
    });
  };

  return (
    <ProForm
      title="新建表单"
      formRef={formRef}
      submitter={{
        render: (props, doms) => {
          return [
            ...doms,
            <Button htmlType="button" onClick={onFill} key="edit">
              一键填写
            </Button>,
            <Button htmlType="button" onClick={getCompanyName} key="read">
              读取公司
            </Button>,
            <Button.Group key="refs" style={{ display: 'block' }}>
              <Button htmlType="button" onClick={getFormatValues} key="format">
                获取格式化后的所有数据
              </Button>
              <Button htmlType="button" onClick={validateAndGetFormatValue} key="format">
                校验表单并返回格式化后的所有数据
              </Button>
            </Button.Group>,
          ];
        },
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        message.success('提交成功');
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="签约客户名称"
        tooltip="最长为 24 位"
        placeholder="请输入名称"
      />

      <ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />
      <ProFormDatePicker name="date" initialValue={moment('2021-08-09')} />
    </ProForm>
  );
};