成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JSON生成Form表單（四）

Richard_Gao / 1965人閱讀

摘要：表單實(shí)例方法靜態(tài)方法表單有一個(gè)靜態(tài)方法方法時(shí)表單的靜態(tài)方法，用來(lái)引入抽象出來(lái)的表單組件。首先需要開啟實(shí)時(shí)表單提交，在表單配置中設(shè)置為。到目前為止，表單適合大部分的表單應(yīng)用場(chǎng)景。

JSON表單實(shí)例方法 靜態(tài)方法

json表單有一個(gè)靜態(tài)方法：createCustomComp

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

createCustomComp方法時(shí)json表單的靜態(tài)方法，用來(lái)引入抽象出來(lái)的表單組件。

實(shí)例方法

registerSubmit 用來(lái)注冊(cè)實(shí)時(shí)提交函數(shù)

getValue 用來(lái)獲取表單數(shù)據(jù)

modifyDataFn 用來(lái)修改表單數(shù)據(jù)

實(shí)時(shí)表單

實(shí)時(shí)表單一般用于篩選表單，每當(dāng)表單組件觸發(fā)數(shù)據(jù)修改時(shí)，整個(gè)表單就觸發(fā)數(shù)據(jù)提交，JSON表單默認(rèn)不是實(shí)時(shí)表單。
首先需要開啟實(shí)時(shí)表單提交，在表單配置中設(shè)置realTimeSubmit為true。

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

接著注冊(cè)實(shí)時(shí)表單的提交函數(shù)：

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

提交函數(shù)的回調(diào)方法里，valid表示校驗(yàn)結(jié)果，如果為false，表示校驗(yàn)不通過(guò)。

如果在某一些表單組件里，不希望實(shí)時(shí)提交，比如搜索框，實(shí)時(shí)提交導(dǎo)致請(qǐng)求過(guò)于頻繁，這時(shí)可以在組件配置里設(shè)置preventSubmit: true，這樣該表單組件就不能實(shí)時(shí)提交，需要自定義提交。

這時(shí)可以在表單組件的其他事件里自定義提交事件，比如在如下圖所示的搜索框，可以點(diǎn)擊后面的按鈕時(shí)才觸發(fā)提交：

handleClick = () => {
    this.JSONForm.modifyDataFn((data, changeDataFn) => {
        changeDataFn("name", data.name)
    })
}
非實(shí)時(shí)表單

非實(shí)時(shí)表單提交數(shù)據(jù)，就是在表單輸入完畢后，點(diǎn)擊提交按鈕統(tǒng)一提交所有的數(shù)據(jù)，其提交的方式如下：

function handleClick() {
    this.FormRefs.getValue((valid, data) => {
        // valid 表示校驗(yàn)結(jié)果，false表示校驗(yàn)不通過(guò)
    })
}
JSON表單的應(yīng)用場(chǎng)景 表單分類 
a. 按復(fù)雜度分類
    1. 簡(jiǎn)單表單：表單組件為input、select、textarea等常見的幾種，且表單組件之間邏輯獨(dú)立
    2. 復(fù)雜表單：表單組件內(nèi)容和交互復(fù)雜且相互之間存在復(fù)雜的邏輯
其中復(fù)雜表單又可以分為：
    1. 聯(lián)動(dòng)表單，上一個(gè)表單組件會(huì)影響接下來(lái)表單的值
    2. 實(shí)時(shí)表單，表單組件的事件會(huì)觸發(fā)表單的實(shí)時(shí)提交，例如篩選表單
    3. 富控制表單，表單內(nèi)部含有很多的控制邏輯

JSON表單最適合的應(yīng)用場(chǎng)景是簡(jiǎn)單表單，它可以用極少的代碼，快速的構(gòu)建出表單來(lái)，對(duì)于復(fù)雜類型的表單，JSON表單需要使用container來(lái)構(gòu)建復(fù)雜的表單組件、處理復(fù)雜的控制邏輯，其代碼量?jī)?yōu)勢(shì)雖然并不明顯，但是JSON表單可以使其代碼結(jié)構(gòu)清晰，將表單組件和表單邏輯徹底解耦，便于抽離和維護(hù)，且可以很簡(jiǎn)單的實(shí)現(xiàn)表單組件的跨項(xiàng)目共用，也帶來(lái)不少的好處。

到目前為止，JSON表單適合大部分的表單應(yīng)用場(chǎng)景。

JSON表單解決的問(wèn)題

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

將表單組件和數(shù)據(jù)解耦，代碼結(jié)構(gòu)清晰，便于維護(hù)

簡(jiǎn)化了校驗(yàn)功能，只需要傳入validate字段即可

添加了自動(dòng)緩存功能

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

在我的項(xiàng)目，我嘗試了使用原始表單和JSON表單兩種方式來(lái)實(shí)現(xiàn)同一個(gè)表單頁(yè)，原始表單我編寫了600多行的代碼，而在JSON表單中，只有不到150行，所以這是一個(gè)值得嘗試的方案。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99331.html

相關(guān)文章

  • JSON生成Form表單（三）

    摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來(lái)，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四 container表單組件 在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫(kù)提供的表單...

    Half 評(píng)論0 收藏0

  • JSON生成Form表單（一）

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

    qpal 評(píng)論0 收藏0

  • JSON生成Form表單（二）

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

    bang590 評(píng)論0 收藏0

  • Http請(qǐng)求中的Content-Type

    摘要：協(xié)議采用了請(qǐng)求響應(yīng)模型。報(bào)頭分為通用報(bào)頭，請(qǐng)求報(bào)頭，響應(yīng)報(bào)頭和實(shí)體報(bào)頭。格式支持比鍵值對(duì)復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點(diǎn)也很有用。例如下面這段代碼最終發(fā)送的請(qǐng)求是這種方案，可以方便的提交復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合的接口。 一 前言 ----現(xiàn)在搞前端的不學(xué)好http有關(guān)的知識(shí)已經(jīng)不行啦～筆者也是后知后覺，在搞node的時(shí)候意識(shí)到網(wǎng)絡(luò)方面的薄弱，開始學(xué)起http相關(guān)知識(shí)。這一篇是非?；A(chǔ)的講...

    Betta 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<