使用JSON怎么生成Form表單-創(chuàng)新互聯(lián)

使用JSON怎么生成Form表單？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)建站從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元隆林做網(wǎng)站,已為上家服務(wù),為隆林各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

JSON表單描述

JSON表單是一個(gè)基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。

JSON表單的優(yōu)點(diǎn)是：

  • 可以快速構(gòu)建出一個(gè)表單

  • 表單的數(shù)據(jù)、邏輯、視圖分離，方便抽離和進(jìn)一步抽象

  • 提供校驗(yàn)、自動(dòng)緩存等額外功能，提升錄入體驗(yàn)

  • 可以跨項(xiàng)目的共用復(fù)雜的表單組件

原始表單的缺點(diǎn)

1：代碼量龐大，開發(fā)效率低
每次開發(fā)一個(gè)表單頁的時(shí)候，都需要重復(fù)編寫表單組件及其交互事件的代碼，這塊代碼重復(fù)編寫且與主線業(yè)務(wù)邏輯無關(guān)，除此之外，表單的校驗(yàn)、緩存等額外功能，也需要不少的代碼量，這樣就造成了一個(gè)表單頁的代碼量龐大。

2：不便于抽離和進(jìn)一步的抽象
在一個(gè)表單頁內(nèi)，往往會(huì)將表單數(shù)據(jù)、表單組件、控制邏輯雜糅在一起，當(dāng)發(fā)現(xiàn)某一個(gè)子功能在很多場景下都需要用到的時(shí)候，想把該子功能拆分出來發(fā)現(xiàn)并不容易，因?yàn)檫壿嫛?shù)據(jù)、視圖的雜糅，導(dǎo)致想把子功能不受影響的剔除出來需要很仔細(xì)的檢查，這樣就導(dǎo)致功能的抽離和抽象的不便

3：維護(hù)成本高
這個(gè)和第二個(gè)問題是同樣的原因，這也是我的親身經(jīng)歷，當(dāng)我在項(xiàng)目中想優(yōu)化一個(gè)小功能的時(shí)候，發(fā)現(xiàn)不僅把之前的邏輯改沒了，還引出了不少的bug，這導(dǎo)致在一個(gè)邏輯很復(fù)雜的表單里，維護(hù)變成了一件高危工作。

4：需要額外處理校驗(yàn)和緩存等功能

一個(gè)栗子

const config = {
  formKey: 'example-form',
  data: {
    name: '',
    descr: '',
    typeName: ''
  },
  config: [
    {
      type: 'input',
      dataKey: 'name',
      label: 'param',
      placeholder: '請輸入param',
      validate: ['required', /^[a-zA-Z_{}0-9]+$/g],
      style: {
        display: 'inline-block',
        width: 270,
      },
    },
    {
      type: 'select',
      dataKey: 'typeName',
      options: ['string', 'integer', 'float'],
      style: {
        display: 'inline-block',
        width: 100,
        margin: '0 15px'
      },
      validate: [{type: 'required', message: 'param類型不能為空'}]
    },
    {
      type: 'textarea',
      dataKey: 'descr',
      placeholder: '請輸入param含義',
      label: 'param含義',
      validate: ['required'],
      style: {
        width: 385,
      }
    },
  ]
}

<From ref={ref => this.FormWrap = ref} config={config}></From>

上面是用JSON描述的三個(gè)常用的表單組件組合成的表單，其效果圖如下：

使用JSON怎么生成Form表單

JSON表單的格式


{
  formKey: 'paramAddForm',
  data: {},
  config: []
}
屬性是否必傳說明類型默認(rèn)值
formKey否用來自動(dòng)緩存，localStorage的key，不傳表示不自動(dòng)緩存string-
className否用來添加一些自定義樣式string-
data是表單的提交數(shù)據(jù)，有自動(dòng)緩存和校驗(yàn)功能object-
assisData否用于表單控制邏輯的額外數(shù)據(jù)object-
config是組件配置，表單組件的配置Array-
realTimeSubmit否表單是否實(shí)時(shí)提交，一般用于篩選表單booleanfalse

表單組件的配置


{
  type: 'input',
  dataKey: 'name',
  label: 'param',
  validate: ['required'],
  style: {}
}
屬性是否必傳說明類型默認(rèn)值
type是表單組件的類型，其值可以為: input、select、textarea、form_array、container和一些自定義表單組件string-
dataKey否指定表單組件值的key，可以為param.name.firstName形式string-
label否表單組件的labelstring-
placeholder否表單組件的placeholderstring-
validate否表單組件的校驗(yàn)規(guī)則Array-
style否表單組件的布局樣式string-
options否當(dāng)表單組件為select時(shí)，需要傳入的optionsArray-
render否當(dāng)type為container時(shí)，為自定義組件，render為渲染方法Function-
preventSubmit否當(dāng)realTimeSubmit為true時(shí)，控制當(dāng)前表單組件是否實(shí)時(shí)提交booleanfalse
children否當(dāng)type為form_array時(shí)，children表示子組件配置列表Array-
modifyDataFn否當(dāng)type為自定義組件時(shí)，且需要覆蓋render方法中的提交數(shù)據(jù)方法，可以使用modifyDataFn來重新自定義提交數(shù)據(jù)Function-

關(guān)鍵字段解釋

1. type

type是用來唯一表示表單組件類型的字段，其中JSON表單提供了三種默認(rèn)的表單組件：input、select、textarea，還有兩種復(fù)雜類型的表單組件：form_array、container。

form_array表單組件表示其數(shù)據(jù)結(jié)構(gòu)為Array，含有增加項(xiàng)刪除項(xiàng)的復(fù)合表單組件，該表單組件的配置里多一個(gè)children的字段，里面是每一項(xiàng)里面的表單組件配置的集合，其表單組件的效果如下圖所示：

使用JSON怎么生成Form表單

container是用來自定義表單的接口，具體用法參考下面具體的介紹。

2. validate

validate是校驗(yàn)表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為String、object、RegExp、Function。

JSON表單采用的是async-validator異步處理校驗(yàn)，在JSON表單內(nèi)部會(huì)將validate傳入的校驗(yàn)關(guān)鍵字解析為async-validator的rules。所以validate數(shù)組元素如果為object的話，其內(nèi)容就是async-validator的rules。

1. 數(shù)組元素為string，其值可以為：

  • string，值必須為string

  • number，值必須為數(shù)字

  • required，值不能為空

  • boolean，值必須為布爾值

  • integer，值必須為整數(shù)形

  • float，值必須為浮點(diǎn)型

  • email，值必須為郵箱類型

2. 數(shù)組元素為object，其值為rules：
{type: 'enum', enum: ['1', '2'], message: '值不在確定范圍內(nèi)'}

3. 數(shù)組元素為RegExp, validate: [/^[a-zA-Z_{}0-9]+$/g]

4. 數(shù)組元素為Function， validate: [ (rules, value, callback) => {}]

3. style

用來確定表單組件在表單內(nèi)的布局樣式，比如想讓表單組件行內(nèi)顯示，且寬度為200，其style值如下：

{
  display: 'inline-block',
  width: 200
}

container表單組件

container表單組件是用來自定義表單組件的，它主要的作用有以下幾點(diǎn)：

  • 添加表單組件庫，例如Ant-Design

  • 自定義表單組件，例如圖片上傳組件

  • 用來構(gòu)建復(fù)雜的表單組件

  • 處理控制邏輯和聯(lián)動(dòng)邏輯

使用栗子

import { Input, Select } from 'antd'
const Option = Select.Option
{
  type: 'container',
  dataKey: 'descr',
  style: {
    display: 'inline-block',
    width: 100,
    margin: '0 15px'
  },
  options: ['string', 'integer', 'float'],
  render: (curData, config, {changeFn, getFocus, loseFocus, error}) => {
    return <Select value={curData} 
      style={{width: '100%', height: 35}} 
      onMouseEnter={getFocus}
      onChange={(value) => changeFn(value, () => {
        loseFocus()
      })}>
      {
        config.options && config.options.map((item, idx) => <Option key={idx} value={item}>{item}</Option>)
      }
    </Select>
  }
},

container表單組件只是多一個(gè)render渲染方法，里面可以自定義表單組件的渲染內(nèi)容，render方法提供如下參數(shù)：

1. curData: 當(dāng)前container組件的值，跟dataKey相關(guān)
2. config: 當(dāng)前container組件的配置
3：{changeFn, changeDataFn, getFocus, loseFocus, error, JSONForm}
changeFn, changDataFn是提交數(shù)據(jù)的方法，changeFn只能修改當(dāng)前組件dataKey的值，changeDataFn可以修改data中任意字段的值，changeFn(value, [callback]), changeFn(dataKey, value, [callback])
getFocus，loseFocus是自定義處理校驗(yàn)的字段，loseFocus是開始校驗(yàn)，getFocus是去掉校驗(yàn)的報(bào)錯(cuò)信息
error是校驗(yàn)結(jié)果的報(bào)錯(cuò)信息
JSONForm是在container中使用JSON表單的組件配置用來生成新的表單組件，意思里container中依然可以嵌套表單組件。

使用antd的組件庫

JOSN表單只提供了input、select、textarea三種默認(rèn)的表單組件，遠(yuǎn)遠(yuǎn)不夠真實(shí)的項(xiàng)目中使用，所以我們可以將antd組件庫中的組件封裝到JSON表單中，這樣我們就可以再項(xiàng)目中很快的使用antd中的組件。

antd-components.js

import React from 'react'
import { Input } from 'antd'
export default [
  {
    type: 'antd-input',
    render: (curData, config, {changeFn, getFocus, loseFocus, error}) => {
      return <Input value={curData} 
        onFocus={getFocus}
        onBlur={loseFocus}
        placeholder={config.placeholder ? config.placeholder : ''}
        style={{borderColor: !!error ? '#f5222d' : ''}}
        onChange={event => changeFn(event.target.value)} />
    }
  }
]

我們在antd-components.js文件中聲明一個(gè)antd-input的自定義組件，然后在JSON表單中引入該自定義表單組件：

init.js

import Form from 'Form'
import components from './antd-components'
From.createCustomComp(components)

const config = {
  formKey: 'paramAddFromAntd',
  data: {
    name: '',
  },
  config: [
    {
      type: 'antd-input',
      dataKey: 'name',
      label: 'Param',
      placeholder: '請輸入param',
      validate: ['required', /^[a-zA-Z_{}0-9]+$/g]
    }
  ]
}
<From ref={ref => this.FormWrap = ref} config={config}></From>

使用container來引入antd組件庫，其原理就是通過container將antd組件封裝成'antd-input'自定義組件，然后使用它，這種方式不僅可以用來封裝組件庫，還可以用來共享一些共用表單組件，可以將常用的復(fù)雜表單組件封裝在一個(gè)共用文件里，然后在不同項(xiàng)目中引用，就可以跨項(xiàng)目共用表單組件。

在自定義組件中，如果需要自定義表單提交數(shù)據(jù)函數(shù)，但是又不能重寫render方法以防覆蓋原先的render方法，所以可以使用modifyDataFn方法來覆蓋render中的提交數(shù)據(jù)部分。

modifyDataFn: ({changeFn, changeDataFn}, {parent, self}) => {
  let {parentData} = parent
  parentData = parentData.map(item => ({
    ...item,
    name: self.curData
  }))
  changeDataFn(parent.parentKey, parentData)
}

處理控制邏輯和聯(lián)動(dòng)邏輯

在JSON表單JSON配置中，有assistData的選填字段，該字段為JSON表單處理控制邏輯的額外數(shù)據(jù)，例如在表單內(nèi)有一個(gè)刷新按鈕，其實(shí)現(xiàn)代碼如下：

{
  data: {},
  assistData: {
    refreshParam: false
  },
  config: [
    {
      type: 'container',
      dataKey: 'assistData.refreshParam',
      render: (curData, config, {changeFn, changeDataFn}) => {
        const handleClick = () => {
          changeDataFn('assistData.refreshParam' ,true)
          setTimeout(() => {
            changeDataFn('assistData.refreshParam' ,false)
          }, 1000 * 3)
        }
        return <React.Fragment>
          {
            config.index === config.parentData.length - 1 &&
            <Popover placement="top" content="刷新param列表">
              <Button shape="circle" loading={curData} onClick={handleClick}>{!curData && <Icon type="reload" />}</Button>
            </Popover>
          }
        </React.Fragment>
      }
    },
  ]
}

注意： 如果要使用assistData中的數(shù)據(jù)，其dataKey必須以assistData開頭，且必須使用changeDataFn自定義提交assistData數(shù)據(jù)。

render方法內(nèi)嵌套組件配置

{
  type: 'container',
  dataKey: 'param',
  render: (curData, config, {changeFn, changeDataFn, JSONForm}) => {
    return <div>
      {
        JSONForm([
          {
            type: 'input',
            dataKey: 'name',
            placeholder: '請輸入param',
            validate: ['required'],
          }
        ])
      }
    </div>
  }

這樣就可以在container內(nèi)嵌套組件配置，實(shí)現(xiàn)更復(fù)雜的表單組件。

JSON表單提交數(shù)據(jù)

非實(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)不通過
  })
}

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

實(shí)時(shí)表單的提交首先需要注冊提交函數(shù)：

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

接著在配置里設(shè)置允許實(shí)時(shí)提交的字段：

{
  formKey: '',
  realTimeSubmit: true
}

如果需要在某些表單組件里自定義是否實(shí)時(shí)提交，需要在組件配置里設(shè)置阻止實(shí)時(shí)提交字段為true：

{
  dataKey: '',
  preventSubmit: true
}

JSON表單的應(yīng)用場景

表單分類

a. 按復(fù)雜度分類
1. 簡單表單：表單組件為input、select、textarea等常見的幾種，且表單組件之間邏輯獨(dú)立
2. 復(fù)雜表單：表單組件內(nèi)容和交互復(fù)雜且相互之間存在復(fù)雜的邏輯

其中復(fù)雜表單又可以分為：
1. 聯(lián)動(dòng)表單，上一個(gè)表單組件會(huì)影響接下來表單的值
2. 實(shí)時(shí)表單，表單組件的事件會(huì)觸發(fā)表單的實(shí)時(shí)提交，例如篩選表單
3. 富控制表單，表單內(nèi)部含有很多的控制邏輯

JSON表單最適合的應(yīng)用場景是簡單表單，它可以用極少的代碼，快速的構(gòu)建出表單來，對于復(fù)雜類型的表單，JSON表單需要使用container來構(gòu)建復(fù)雜的表單組件、處理復(fù)雜的控制邏輯，其代碼量優(yōu)勢雖然并不明顯，但是JSON表單可以使其代碼清晰，將表單組件和表單邏輯徹底解耦，便于抽離和維護(hù)，便于共享常用組件，也帶來不少的好處。

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

JSON表單解決的問題

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

  • 將表單組件和數(shù)據(jù)解耦，便于子功能的拆分和常用組件的共享

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

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

看完上述內(nèi)容，你們掌握使用JSON怎么生成Form表單的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前名稱：使用JSON怎么生成Form表單-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://bm7419.com/article8/hciop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)