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

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

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

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

添加表單組件庫，例如Ant-Design

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

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

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

在我的團隊項目中，大家使用的都是Ant-Design組件庫，那么接下來我們就把Ant-Design組件庫接入到JSON表單中。

首先我們創(chuàng)建一個組件文件，取名為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)} />
        }
    }
]

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

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

這樣我們就可以在項目的任何地方使用該組件庫：

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

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

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

通過container使用共用表單組件時，存在一個問題，那就是無法再次自定義表單組件的提交事件，例如：使用上面的antd-input自定義組件，該組件自動提交本組件的數(shù)據(jù)，但是如果想聯(lián)動處理其他表單，修改其他表單組件的數(shù)據(jù)，這個時候不能在組件配置里重寫render，因為組件配置里的render會覆蓋掉組件庫中的render，導致抽象出來的渲染方法失效。

modifyDataFn用來自定義提交數(shù)據(jù)，只會覆蓋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，當該表單組件為form_array的子表單組件時，該值為form_array的組件數(shù)據(jù)
   3: self，該表單組件的數(shù)據(jù)

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

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

{
    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 && }
                        
                    }
                
            }
        },
    ]
}

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

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

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

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

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

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

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