ant form

<UpdateForm
  onSubmit={async (value) => {
    const success = await handleUpdate(value);
    if (success) {
      handleUpdateModalVisible(false);
      setCurrentRow(undefined);
      if (actionRef.current) {
        actionRef.current.reload();
      }
    }
  }}
  updateModalVisible={updateModalVisible}
  handleUpdateModalVisible={handleUpdateModalVisible}
  values={currentRow || {}}
/>

-------------------

import React from ‘react‘;
import {Button, message, Modal} from ‘antd‘;
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
  ProFormRadio,
  ProFormDateTimePicker, ProFormDateRangePicker, DrawerForm,
} from ‘@ant-design/pro-form‘;
import { useIntl, FormattedMessage } from ‘umi‘;

import type { TableListItem } from ‘../data.d‘;

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<TableListItem>;

export type UpdateFormProps = {
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  handleUpdateModalVisible: any;
  values: Partial<TableListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();

  return (

      <DrawerForm
        visible={props.updateModalVisible}
        onVisibleChange={props.handleUpdateModalVisible}
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="签约客户名称"
            tooltip="最长为 24 位"
            placeholder="请输入名称"
            initialValue={props.values.title}
          />
          <ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText name="contract" width="md" label="合同名称" placeholder="请输入名称" />
          <ProFormDateRangePicker
            width="md"
            name={[‘contract‘, ‘createTime‘]}
            label="合同生效时间"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            options={[
              {
                value: ‘chapter‘,
                label: ‘盖章后生效‘,
              },
            ]}
            readonly
            width="xs"
            name="useMode"
            label="合同约定生效方式"
          />
          <ProFormSelect
            width="xs"
            options={[
              {
                value: ‘time‘,
                label: ‘履行完终止‘,
              },
            ]}
            name="unusedMode"
            label="合同约定失效效方式"
          />
        </ProForm.Group>
        <ProFormText width="sm" name="id" label="主合同编号" />
        <ProFormText
          name="project"
          width="md"
          disabled
          label="项目名称"
          initialValue="xxxx项目"
        />
        <ProFormText width="xs" name="mangerName" disabled label="商务经理" initialValue="启途" />
      </DrawerForm>

  );
};

export default UpdateForm;

ant form

原文：https://www.cnblogs.com/yaoyao66123/p/14382959.html