Ant Pro组件——proForm使用总结

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

最近在项目中用到了proForm, 总结了一些自己用到的方法和经验，记录下来~ 仅供参考

表单的一些基础用法

1、布局，可以使用layout: horizontal,vertical,inline等

<ModalForm layout="horizontal" />

• horizontal 水平排列，lable在左边
• vertical 垂直排列，label在上边

2、还可以通过wrapperCol，labelCol来整体设置label 和 控件的 布局

    <ModalForm
          visible={visible}
          layout="vertical"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          >
      </ModalForm>

3、结合Row和Col来实现布局

<ModalForm>
    <Row>
        <Col span={6}>
            <ProFormText initialValue="prop"/>
        </Col>
        <Col span={6}>...</Col>
        <Col span={6}>...</Col>
        <Col span={6}>...</Col>
        <Col span={6}>...</Col>
    <Row>

</ModalForm>

这样一排会有四个控件

4、设置宽度可以用直接使用属性width

<ModalForm width={960} />

5、如果想要设置默认值，可以使用initialValues

<ProForm initialValues={obj} />

6、ProForm 是 antd 的 Form 的封装，如果要使用自定义的组件可以用 Form.Item 包裹后使用，支持混用

<ProForm>
  <Form.Item noStyle shouldUpdate>
    {(form) => {
      return (
        <ProFormSelect
          options={[
            {
              value: "chapter",
              label: "盖章后生效",
            },
          ]}
          width="md"
          name="useMode"
          label={`与${form.getFieldValue("name")}合同约定生效方式`}
        />
      );
    }}
  </Form.Item>
</ProForm>;

7、还有ModalForm 和 DrawerForm

• ModalForm组合了 Modal 和 ProForm
• DrawerForm 组合了 Drawer 和 ProForm

8、提交表单的回调onFinish

 <ProForm 
    onFinish={async (values) => {
       ...
    }
 />

9、不要页脚的按钮

 <ProForm submitter={false} />

10、自定义按钮：

 <ProForm submitter={{
    render: (props) => {
      if (preview) {
        return [
          <Button key="submit" type="primary" ghost onClick={closeModal}>
            关闭
          </Button>,
        ];
      }
      return [
        <Button key="submit" type="primary" ghost onClick={closeModal}>
          关闭
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={() => {
            submit();
          }}
        >
          保存
        </Button>,
      ];
    },
  }} />

表单的方法

1、formRef

import React, { useRef } from 'react';
import type { ProFormInstance } from '@ant-design/pro-form';

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


 return (
    <ProForm
      title="新建表单"
      formRef={formRef} 
    >
    </ProForm>
  );

1.自动提交表单：

formRef.current?.submit()

2.重置表单：

formRef.current?.resetFields()

3.设置某一个filed:

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

4.获取name为company的filed:

formRef?.current?.getFieldValue('company')

更多参考：formRef

表单项

以下是一些ProForm自带的表单项，我只列举了一些我用到的部分~：

• ProFormText： 输入各类文本
• ProFormTextArea： 输入多行文本
• ProFormCaptcha： 输入验证码，一般用于登录、注册页
• ProFormSelect： 下拉选择框，支持request 和 valueEnum来生成选择项
• ProFormDatePicker： 日期选择
• ProFormDigit： 用于输入数字，自带一些格式化 ...

更多可以移步：组件列表

1、设置大小长度:width,通常有"xs" | "sm" | "md" | "lg" | "xl"

<ProFormText width="md" />

2、表单项是否支持清楚：allowClear,默认是true,支持清除

<ProFormText allowClear={false} />

3、

1、表单项都支持 fieldProps 属性来支持设置输入组件的props

2、每个表单项同时也支持了 readonly ，不同的组件会有不同的只读样式，与 disable 相比 readonly 展示更加友好

3、ProFormText 是 FormItem + Input 的产物，可以类比于以下的代码：

const ProFormText = (props) => {
  return (
    <ProForm.Item {...props}>
      <Input placeholder={props.placeholder} {...props.fieldProps} />
    </ProForm.Item>
  );
};

所以我们给 ProFormText 设置的 props 其实是 Form.Item 的，fieldProps 才是包含的组件的

目前是这些，更多后面补充了~