json表單有一個靜態方法:createCustomCompjson
import Form from 'json_transform_form' import components from './components' From.createCustomComp(components)
createCustomComp方法時json表單的靜態方法,用來引入抽象出來的表單組件。緩存
實時表單通常用於篩選表單,每當表單組件觸發數據修改時,整個表單就觸發數據提交,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表示校驗不經過 }) }
a. 按複雜度分類 1. 簡單表單:表單組件爲input、select、textarea等常見的幾種,且表單組件之間邏輯獨立 2. 複雜表單:表單組件內容和交互複雜且相互之間存在複雜的邏輯 其中複雜表單又能夠分爲: 1. 聯動表單,上一個表單組件會影響接下來表單的值 2. 實時表單,表單組件的事件會觸發表單的實時提交,例如篩選表單 3. 富控制表單,表單內部含有不少的控制邏輯
JSON表單最適合的應用場景是簡單表單,它能夠用極少的代碼,快速的構建出表單來,對於複雜類型的表單,JSON表單須要使用container來構建複雜的表單組件、處理複雜的控制邏輯,其代碼量優點雖然並不明顯,可是JSON表單可使其代碼結構清晰,將表單組件和表單邏輯完全解耦,便於抽離和維護,且能夠很簡單的實現表單組件的跨項目共用,也帶來很多的好處。事件
到目前爲止,JSON表單適合大部分的表單應用場景。圖片
在個人項目,我嘗試了使用原始表單和JSON表單兩種方式來實現同一個表單頁,原始表單我編寫了600多行的代碼,而在JSON表單中,只有不到150行,因此這是一個值得嘗試的方案。