一、前言

今天開發的時候，發現一個頁面的表單其實是兩個部分，其中一部分還在另一個頁面引用了。這就增加代碼量，所以優化下，為了重復使用這里的表單。

如圖，需求就是將下面兩個表單拆開，可以重復使用，實際兩部分可能有很多表單，這里方便起見，只寫了三個。

二、涉及到知識點

• 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方法，返回給父組件。