摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來(lái)，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四

在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫(kù)提供的表單組件就已經(jīng)很實(shí)用了。

所以container提供了一套規(guī)則來(lái)自定義表單組件，來(lái)滿足實(shí)際項(xiàng)目中復(fù)雜且靈活的表單組件使用場(chǎng)景，container主要的作用有以下幾點(diǎn)：

自定義表單組件，例如圖片上傳組件

添加表單組件庫(kù)，例如Ant-Design

處理控制邏輯和聯(lián)動(dòng)邏輯

import {Input} from "antd"
{
    formKey: "test-form",
    ...
    config: [
        {
            type: "container",
            dataKey: "name",
            label: "Param",
            customConfig: {
                // 自定義的配置
            },
            render: (curData, config, {changeFn, changeDataFn, getFocus, loseFocus, JSONForm, error, assistData, data}) => {
                return  changeFn(event.target.value)} />
        }
        }
    ]
}

render方法的參數(shù)：
    1：curData，該container組件對(duì)應(yīng)的值
    2：config，該container的組件配置，config.customConfig是自定義配置，里面可以傳入antd的input組件的配置
    3：changeFn，changeDataFn：提交數(shù)據(jù)的方法, 兩者的區(qū)別在于changeFn只能提交當(dāng)前表單組件的值，changeDataFn能自定義提交的值
        changeFn(value, [callback])
        changeDataFn(key, value, [callback])
    4：getFocus，loseFocus：用來(lái)觸發(fā)數(shù)據(jù)校驗(yàn)，loseFocus方法觸發(fā)校驗(yàn)，getFocus方法來(lái)取消報(bào)錯(cuò)信息
    5：JSONForm是用來(lái)在render方法里渲染組件配置，即在container里嵌套組件配置
    6：error：校驗(yàn)報(bào)錯(cuò)
    7：assistData，data： 邏輯數(shù)據(jù)和表單數(shù)據(jù)

其實(shí)你會(huì)發(fā)現(xiàn)，container自定義的表單組件并不比原始表單簡(jiǎn)單，估計(jì)你會(huì)懷疑這種實(shí)現(xiàn)方式的價(jià)值。的確，如果container只能這樣自定義使用我們的表單組件，那么它的實(shí)用意義的確不大。

在我的團(tuán)隊(duì)項(xiàng)目中，大家使用的都是Ant-Design組件庫(kù)，那么接下來(lái)我們就把Ant-Design組件庫(kù)接入到JSON表單中。

首先我們創(chuàng)建一個(gè)組件文件，取名為antd-components.js：

import React from "react"
import { Input } from "antd"
export default [
    {
        type: "antd-input",    // 聲明為antd-input的自定義表單組件
        render: (curData, config, {changeFn, getFocus, loseFocus, error}) => {
            return  changeFn(event.target.value)} />
        }
    }
]

然后在我們的項(xiàng)目初始化的文件中(init.js)引入該組件庫(kù)：

import Form from "json_transform_form"
import components from "./antd-components"
From.createCustomComp(components)

這樣我們就可以在項(xiàng)目的任何地方使用該組件庫(kù)：

{
    formKey: "test-form",
    ...
    config: [
        {
            type: "antd-input",  // 使用antd-input表單組件
            dataKey: "name",
            label: "Param",
            customConfig: {},   // 自定義配置
        }
    ]
}

你看這樣container的實(shí)用價(jià)值就體現(xiàn)出來(lái)了，復(fù)雜表單組件的自定義只需要編寫(xiě)一次，接下來(lái)的重復(fù)使用，只需要傳入相應(yīng)的配置即可。

跨項(xiàng)目的共用表單組件也是通過(guò)該方式實(shí)現(xiàn)，維護(hù)一個(gè)不同項(xiàng)目都可引用的組件庫(kù)文件，將常用的復(fù)雜表單組件，抽象在該組件庫(kù)文件里，然后在不同項(xiàng)目初始化時(shí)引入進(jìn)來(lái)，這樣就能在不同項(xiàng)目中共用表單組件。

通過(guò)container使用共用表單組件時(shí)，存在一個(gè)問(wèn)題，那就是無(wú)法再次自定義表單組件的提交事件，例如：使用上面的antd-input自定義組件，該組件自動(dòng)提交本組件的數(shù)據(jù)，但是如果想聯(lián)動(dòng)處理其他表單，修改其他表單組件的數(shù)據(jù)，這個(gè)時(shí)候不能在組件配置里重寫(xiě)render，因?yàn)榻M件配置里的render會(huì)覆蓋掉組件庫(kù)中的render，導(dǎo)致抽象出來(lái)的渲染方法失效。

modifyDataFn用來(lái)自定義提交數(shù)據(jù)，只會(huì)覆蓋render方法中的提交數(shù)據(jù)的功能。

{
    formKey: "test-form",
    ...
    config: [
        {
            type: "antd-input",  // 使用antd-input表單組件
            ...
            modifyDataFn: ({changeFn, changeDataFn}, {parent, self}) => {
                changeDataFn("name", self.curDAta)
            }
        }
    ]
}

modifyDataFn的參數(shù)：

   1：changeFn，changeDataF，提交數(shù)據(jù)的方法
   2：parent，當(dāng)該表單組件為form_array的子表單組件時(shí)，該值為form_array的組件數(shù)據(jù)
   3: self，該表單組件的數(shù)據(jù)

在JSON表單的表單配置中，有assistData的選填字段，該字段為JSON表單內(nèi)部處理復(fù)雜的控制邏輯所需的額外數(shù)據(jù)，該數(shù)據(jù)不會(huì)被提交和緩存。例如：在表單內(nèi)存在一個(gè)刷新按鈕，點(diǎn)擊會(huì)刷新前一個(gè)表單組件的數(shù)據(jù)，其效果圖如下：

表單中間的刷新按鈕，可以認(rèn)為是一個(gè)特殊的container表單組件，因此可以根據(jù)container來(lái)自定義該刷新按鈕：

{
    formKey: "test-form",
    assistData: {
        refresh: false,
    },
    config: [
        ...
        {
            type: "container",
            dataKey: "assistData.refreshParam",
            style: {
                ...
            },
            render: (curData, config, {changeFn, changeDataFn}) => {
                const handleClick = () => {
                    changeDataFn("assistData.refresh" ,true)
                    setTimeout(() => {
                        changeDataFn("assistData.refresh" ,false)
                    }, 1000 * 3)
                }
                return 
                    {
                        config.index === config.parentData.length - 1 &&
                        
                            {!curData && }
                        
                    }
                
            }
        },
    ]
}

上面的代碼實(shí)現(xiàn)了刷新按鈕點(diǎn)擊刷新的動(dòng)作，其刷新邏輯是assistData里的refresh字段控制。

注意：如果要使用assistData中的數(shù)據(jù)，其dataKey必須以assistData開(kāi)頭，且必須使用changeDataFn自定義提交assistData數(shù)據(jù)。

如果container表單組件里還含有其他表單組件，這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。

{
    data: {
        param: {
            name: ""
        }
    },
    config: [
        {
            type: "container",
            dataKey: "param",
            render: (curData, config, {changeFn, changeDataFn, JSONForm}) => {
                return 

                    {
                        JSONForm([
                            {
                                type: "input",
                                dataKey: "name",
                                placeholder: "請(qǐng)輸入param",
                                validate: ["required"],
                            }
                        ])
                    }
                
            }
    ]
}

JSONForm方法傳入組件配置的列表就能渲染出表單組件來(lái)，需要注意的是，子表單組件的dataKey一定是基于父表單組件的。

JSON表單的實(shí)例方法請(qǐng)看下節(jié)的JSON生成Form表單（四）