JSON生成Form表單(四)

JSON表單實例方法

靜態方法

json表單有一個靜態方法:createCustomCompjson

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,
    ...
}

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

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

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

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

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

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

非實時表單

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

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行,因此這是一個值得嘗試的方案。

相關文章
相關標籤/搜索