JSON生成Form表單（四）

Richard_Gao 發布于2019-08-23 13:39 / 1937人閱讀

摘要：表單實例方法靜態方法表單有一個靜態方法方法時表單的靜態方法，用來引入抽象出來的表單組件。首先需要開啟實時表單提交，在表單配置中設置為。到目前為止，表單適合大部分的表單應用場景。

JSON表單實例方法 靜態方法

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

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

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

實例方法

registerSubmit 用來注冊實時提交函數

getValue 用來獲取表單數據

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表單解決的問題

減少了表單代碼量，不需要重復的開發表單組件，只需要輸入組件配置即可

將表單組件和數據解耦，代碼結構清晰，便于維護

簡化了校驗功能，只需要傳入validate字段即可

添加了自動緩存功能

提供了一套規則，便于表單組件的抽象和共用

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

GPU云服務器云服務器 form表單提交json form表單校驗 form表單插件 form表單判斷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99331.html

JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節的生成表單四 container表單組件在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...

Half 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單（一）

摘要：介紹表單是一個基于的抽象組件，它能將格式的配置渲染為一個表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在端項目中，有著很廣泛的用途。如何使用表單的地址為。介紹 JSON表單是一個基于React的抽象組件，它能將JSON格式的配置渲染為一個Form表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在B端項目中，有著很廣泛的用途。 JSON表單的優點有以下幾點：可以快...

qpal 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單（二）

摘要：配置表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。組件組件主要是用來描述組件數據為數組格式的表單組件，其示例如下組件配置是基于父表單組件其效果圖如下表單的表單組件請看下節生成表單三 JSON配置 JSON表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。JSON表單的配置一定是兩種配置的組合。在開始講解配置之前先介紹...

bang590 2019-08-23 13:38 評論0 收藏0
Http請求中的Content-Type

摘要：協議采用了請求響應模型。報頭分為通用報頭，請求報頭，響應報頭和實體報頭。格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。例如下面這段代碼最終發送的請求是這種方案，可以方便的提交復雜的結構化數據，特別適合的接口。一前言 ----現在搞前端的不學好http有關的知識已經不行啦～筆者也是后知后覺，在搞node的時候意識到網絡方面的薄弱，開始學起http相關知識。這一篇是非常基礎的講...

Betta 2019-08-26 11:32 評論0 收藏0