JSON生成Form表單（四）

JSON表單實例方法

靜態方法

json表單有一個靜態方法：createCustomComp

import Form from 'json_transform_form'
import components from './components'
From.createCustomComp(components)

createCustomComp方法時json表單的靜態方法，用來引入抽象出來的表單組件。

實例方法

1. registerSubmit 用來註冊實時提交函數
2. getValue 用來獲取表單數據
3. modifyDataFn 用來修改表單數據

實時表單

實時表單通常用於篩選表單，每當表單組件觸發數據修改時，整個表單就觸發數據提交，JSON表單默認不是實時表單。
首先須要開啓實時表單提交，在表單配置中設置realTimeSubmit爲true。

{
    formKey: 'test-form',
    realTimeSubmit: true,
    ...
}

接着註冊實時表單的提交函數：

componentDidMount(){
    this.FormRefs.registerSubmit((valid, data) => {
        console.log(valid, data) 
    })
}

提交函數的回調方法裏，valid表示校驗結果，若是爲false，表示校驗不經過。

若是在某一些表單組件裏，不但願實時提交，好比搜索框，實時提交致使請求過於頻繁，這時能夠在組件配置裏設置preventSubmit: true，這樣該表單組件就不能實時提交，須要自定義提交。

這時能夠在表單組件的其餘事件裏自定義提交事件，好比在以下圖所示的搜索框，能夠點擊後面的按鈕時才觸發提交：

handleClick = () => {
    this.JSONForm.modifyDataFn((data, changeDataFn) => {
        changeDataFn('name', data.name)
    })
}

非實時表單

非實時表單提交數據，就是在表單輸入完畢後，點擊提交按鈕統一提交全部的數據，其提交的方式以下：

function handleClick() {
    this.FormRefs.getValue((valid, data) => {
        // valid 表示校驗結果，false表示校驗不經過
    })
}

JSON表單的應用場景

表單分類

a. 按複雜度分類
    1. 簡單表單：表單組件爲input、select、textarea等常見的幾種，且表單組件之間邏輯獨立
    2. 複雜表單：表單組件內容和交互複雜且相互之間存在複雜的邏輯
其中複雜表單又能夠分爲：
    1. 聯動表單，上一個表單組件會影響接下來表單的值
    2. 實時表單，表單組件的事件會觸發表單的實時提交，例如篩選表單
    3. 富控制表單，表單內部含有不少的控制邏輯

JSON表單最適合的應用場景是簡單表單，它能夠用極少的代碼，快速的構建出表單來，對於複雜類型的表單，JSON表單須要使用container來構建複雜的表單組件、處理複雜的控制邏輯，其代碼量優點雖然並不明顯，可是JSON表單可使其代碼結構清晰，將表單組件和表單邏輯完全解耦，便於抽離和維護，且能夠很簡單的實現表單組件的跨項目共用，也帶來很多的好處。

到目前爲止，JSON表單適合大部分的表單應用場景。

JSON表單解決的問題

1. 減小了表單代碼量，不須要重複的開發表單組件，只須要輸入組件配置便可
2. 將表單組件和數據解耦，代碼結構清晰，便於維護
3. 簡化了校驗功能，只須要傳入validate字段便可
4. 添加了自動緩存功能
5. 提供了一套規則，便於表單組件的抽象和共用

在個人項目，我嘗試了使用原始表單和JSON表單兩種方式來實現同一個表單頁，原始表單我編寫了600多行的代碼，而在JSON表單中，只有不到150行，因此這是一個值得嘗試的方案。