antd-Form4.x一个页面中多个表单处理

一、前言

今天开发的时候，发现一个页面的表单其实是两个部分，其中一部分还在另一个页面引用了。这就增加代码量，所以优化下，为了重复使用这里的表单。

如图，需求就是将下面两个表单拆开，可以重复使用，实际两部分可能有很多表单，这里方便起见，只写了三个。

二、涉及到知识点

• react hooks

• antd 4.0(Form)

• Promise

• 子父组件传值和父组件调用子组件方法

三、实现方法

具体实现：我放在了Codesandbox，可以直接打开调试

• 1、首先为了充分复用表单组件，那么就要拆分的彻底一点，不能关联太多内容。

• 2、一个模版表单多带带作为一个组件，表单通过useForm()创建。

• 3、在组件外部进行表单提交，分别触发，然后通过Promise.all方法获取表单数据。

• 4、编辑的时候，可以通过props将给表单赋值，然后给子组件注册供父组件调用的方法。

四、具体操作

我们通过codesandbox来试验下，这里表单添加的比较少，可以自行增加。

新建index.js文件，表单最后显示在这里

两个表单模版：templateForm1.js templateForm2.js，由于这两个文件的内容基本一样，需要根据自己的表单内容定义，所以我们这里写了一个。

import React, { useRef } from "react"; import { Button, Divider } from "antd"; import TemplateForm1 from "./templateForm1"; import TemplateForm2 from "./templateForm2"; export default function App() {   const template1Ref = useRef();   const template2Ref = useRef();   const formItemLayout = {     labelCol: { span: 4 },     wrapperCol: { span: 10 }   };   const handleCommit = () => {     let template1Data = new Promise((resolve, reject) => {       template1Ref.current.commitForm((value) => {         resolve(value);       });     });     let template2Data = new Promise((resolve, reject) => {       template2Ref.current.commitForm((value) => {         resolve(value);       });     });     Promise.all([template1Data, template2Data]).then((res) => {       console.log("get", res);     });   };   return (     <div className="App">       <Divider orientation="left">内部信息</Divider>       <TemplateForm1 ref={template1Ref} formItemLayout={formItemLayout} />       <Divider orientation="left">外部信息</Divider>       <TemplateForm2 ref={template2Ref} formItemLayout={formItemLayout} />       <Button onClick={handleCommit}>提交</Button>     </div>   ); } 复制代码

在该文件中，我们引入了两个表单的模版，通过ref属性获取组件，通过props传入父组件的变量。

当我们调用handleCommit的时候，该函数会调用子组件定义好的commitForm的方法来获取表单的数据，获取的数据通过回调函数返回。

因为多个组件存在异步获取的问题，所以这里通过promise.all方法，获取多个表单的内容，然后统一处理。

import React, { useImperativeHandle, forwardRef } from "react"; import { Form, Input } from "antd"; const TemplateForm1 = (props, ref) => {   const { formItemLayout } = props;   const [form] = Form.useForm();   useImperativeHandle(ref, () => ({     commitForm: (cb) => {       handleCommit(cb);     }   }));   const handleCommit = async (cb) => {     try {       const values = await form.validateFields();       cb(values);     } catch (err) {       console.log(err);     }   };   return (     <Form form={form} {...formItemLayout}>       <Form.Item         name="Name"         label="名称"         rules={[{ required: true, message: "请输入名称" }]}       >         <Input placeholder="点输入名称" />       </Form.Item>     </Form>   ); }; export default forwardRef(TemplateForm1); 复制代码

这个组件是我们定义的表单模版，正常读取后，通过async和await获取表单内容，最后再通过commitForm方法，返回给父组件。