一、前言

今天開發(fā)的時(shí)候，發(fā)現(xiàn)一個(gè)頁面的表單其實(shí)是兩個(gè)部分，其中一部分還在另一個(gè)頁面引用了。這就增加代碼量，所以優(yōu)化下，為了重復(fù)使用這里的表單。

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

二、涉及到知識(shí)點(diǎn)

• react hooks

• antd 4.0(Form)

• Promise

• 子父組件傳值和父組件調(diào)用子組件方法

三、實(shí)現(xiàn)方法

具體實(shí)現(xiàn)：我放在了Codesandbox，可以直接打開調(diào)試

• 1、首先為了充分復(fù)用表單組件，那么就要拆分的徹底一點(diǎn)，不能關(guān)聯(lián)太多內(nèi)容。

• 2、一個(gè)模版表單多帶帶作為一個(gè)組件，表單通過useForm()創(chuàng)建。

• 3、在組件外部進(jìn)行表單提交，分別觸發(fā)，然后通過Promise.all方法獲取表單數(shù)據(jù)。

• 4、編輯的時(shí)候，可以通過props將給表單賦值，然后給子組件注冊(cè)供父組件調(diào)用的方法。

四、具體操作

我們通過codesandbox來試驗(yàn)下，這里表單添加的比較少，可以自行增加。

新建index.js文件，表單最后顯示在這里

兩個(gè)表單模版：templateForm1.js templateForm2.js，由于這兩個(gè)文件的內(nèi)容基本一樣，需要根據(jù)自己的表單內(nèi)容定義，所以我們這里寫了一個(gè)。

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">內(nèi)部信息</Divider>       <TemplateForm1 ref={template1Ref} formItemLayout={formItemLayout} />       <Divider orientation="left">外部信息</Divider>       <TemplateForm2 ref={template2Ref} formItemLayout={formItemLayout} />       <Button onClick={handleCommit}>提交</Button>     </div>   ); } 復(fù)制代碼

在該文件中，我們引入了兩個(gè)表單的模版，通過ref屬性獲取組件，通過props傳入父組件的變量。

當(dāng)我們調(diào)用handleCommit的時(shí)候，該函數(shù)會(huì)調(diào)用子組件定義好的commitForm的方法來獲取表單的數(shù)據(jù)，獲取的數(shù)據(jù)通過回調(diào)函數(shù)返回。

因?yàn)槎鄠€(gè)組件存在異步獲取的問題，所以這里通過promise.all方法，獲取多個(gè)表單的內(nèi)容，然后統(tǒng)一處理。

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: "請(qǐng)輸入名稱" }]}       >         <Input placeholder="點(diǎn)輸入名稱" />       </Form.Item>     </Form>   ); }; export default forwardRef(TemplateForm1); 復(fù)制代碼

這個(gè)組件是我們定義的表單模版，正常讀取后，通過async和await獲取表單內(nèi)容，最后再通過commitForm方法，返回給父組件。