JSON生成表单表单的示例

JSON表单描述

JSON表单是一个基于React的抽象组件。它可以将JSON数据格式描述的表单转换成项目中的表单。它可以用几行短代码快速生成表单。

JSON表单的优点是：

可以快速构建表单的数据、逻辑、视图分离，方便抽离和进一步抽象，提供验证、自动缓存等附加功能，提升录入体验。它可以跨项目共享复杂表单组件的缺点。

1.代码量巨大，开发效率低。每次开发表单页面，都需要反复编写表单组件及其交互事件的代码。这段代码是重复编写的，与主要业务逻辑无关。此外，表单验证和缓存等附加功能也需要大量代码，这导致表单页面需要大量代码。

2.在表单页面中进行拉取和进一步抽象是不方便的，表单页面往往混合了表单数据、表单组件和控制逻辑。当发现某个子功能在很多场景下需要使用时，不容易拆分子功能找到。由于逻辑、数据和视图的复杂性，如果不受到影响，就需要仔细检查子功能，从而导致功能。

3.维护成本高和第二个问题的原因是一样的，这也是我个人的体会。当我在项目中尝试对一个小功能进行优化时，发现不仅之前的逻辑发生了改变，还带出了很多bug，导致维护以逻辑复杂的形式成为了一项高风险的工作。

4:需要校验和缓存等附加功能

栗子

const config={ formkey : ' example-form '，data: { name: ' '，descr: ' '，typeName: '' }，config: [ { type: 'input '，Datakey:' name '，label:' param '，placeholder: '请输入param '，validate3360 ['required '，/[a-za-z _ {} 0-9] $/g]，来自上面的formwrap=ref } config={ config }/是由JSON描述的三个常用表单组件组成的表单，其效果图如下：

JSON表单的格式

{必须传递formKey:' param addform '、data: {}、config: []}属性，以说明是否将类型默认值formKey用于自动缓存，localStorage的键“不要传递”表示不自动缓存string-className。不，它用于添加一些自定义样式。字符串数据是表单提交的数据，具有自动缓存和验证功能。object-assisData用于表单控制逻辑的额外数据。对象配置是组件配置。表单组件数组的配置-realTimeSubmit否表单是否实时提交一般用于过滤表单布尔假表单组件的配置

{type:' input '、datakey:' name '、label:' param '、validate3360 ['required']、style: {}属性必须被传递，以解释类型默认值是否是表单组件的类型。这些值可以是：输入、选择、文本区域、form_array、容器和一些自定义表单组件string-dataKey。它的形式可以是param . name . first name string-label无标签string-placeholder无占位符string-validate无检查规则Array-style无表单组件string的布局样式s-options No，当表单组件被选中时，需要传入options Array-render No，当类型为容器时，它是一个自定义组件，render是呈现方法Function-preventSubmit No，当realTimeSubmit为true时，控制当前表单组件是否实时提交boolean false子项。否，当类型为form_array时，子项表示子组件配置列表Array-modifyDataFn。否，当type是自定义组件，需要在render方法中覆盖submit data方法时，可以使用modifyDataFn重新定义submit data Function-key字段解释。

1.类型

类型是用于唯一表示表单组件类型的字段。JSON表单提供了三种默认的表单组件：输入、选择和textarea，以及两种复杂类型的表单组件：form_array和container。

form_Array表单组件表示一个复合表单组件，其数据结构是数组，包含添加的项和删除的项。表单组件的配置还有一个子字段，其中包含每个项目中表单组件配置的集合。表单组件的效果如下图所示：

容器是用于自定义表单的界面。具体用法请参考以下具体介绍。

2.生效

Validate是用于验证表单组件数据正确性的字段，它的值是一个数组，其中数组元素可以是String、object、RegExp和Function。

JSON表单使用异步验证器异步处理验证。在JSON表单中，由validate传入的验证关键字将被解析为异步验证器的规则。因此，如果validate数组元素是object，那么它的内容就是异步验证器规则。

1.数组元素是字符串，它的值可以是：

字符串，值必须是字符串数字，值必须是数字必需的，值不能是空布尔值，值必须是布尔整数，值必须是整数浮点，值必须是浮点电子邮件，值必须是邮箱类型2。数组元素是对象，其值是Rules: {Type:' enum '，enum3360 ['1 '，' 2']。

3.数组元素是regexp，validate :[/[a-za-z _ { } 0-9]$/g]

4.数组元素是Function，validate: [(规则，值，回调)={}]

3.风格

用于确定窗体中窗体组件的布局样式。例如，如果您希望表单组件显示在行中，并且宽度为200，则其样式值如下：

{display: '内嵌块'，宽度： 200}容器表单组件

容器表单组件用于自定义表单组件，其主要功能如下：

添加表单组件库，如Ant-Design自定义表单组件，如图片上传组件，以构建复杂的表单组件。处理控制逻辑和链接逻辑使用栗子

从常量选项=选择中导入{输入，选择}。选项{ type: 'container '，dataKey: 'descr '，style : { display : ' inline-block '，width: 100，margin: '0 15px' }，选项3360 ['string '，' integer '，' float']，render: (curData，config，{changeFn，getFocus，loseffocus，error })={ return Select值={ curData } style={ { width 33366 }表单组件只是多一个提出渲染方法，里面可以自定义表单组件的渲染内容，渲染方法提供如下参数：

1.可达：当前容器组件的值，跟数据键相关2.config:当前容器组件的配置3:{changeFn，changeDataFn，getFocus，loseFocus，error，JSONForm}changeFn，changDataFn是提交数据的方法，changeFn只能修改当前组件数据键的值，更改数据可以修改数据中任意字段的值，changeFn(值，[回调])，changeFn(dataKey，值，[回调])，getFocus，loseFocus是自定义处理校验的字段，loseFocus是开始校验，getFocus是去掉校验的报错信息错误是校验结果的报错信息JSONForm是在容器中使用数据表单的组件配置用来生成新的表单组件，意思里容器中依然可以嵌套表单组件。

使用安特德的组件库

关于序列化表单只提供了输入、选择、文本区域三种默认的表单组件，远远不够真实的项目中使用，所以我们可以将安特德组件库中的组件封装到数据表单中，这样我们就可以再项目中很快的使用安特德中的组件。

antd-components.js

从“反应”导入反应从“蚂蚁”导入{输入}导出默认值[ { type: 'antd-input '，render :(Cordata，config，{changeFn，getFocus，loseFocus，error })={ 0返回值输入={ CodeTa } OnFocus={ GetFocus } OnBull={失去焦点}占位符={config.placeholder？config.placeholder : ''}样式={{borderColor:错误？# f 5222d ' : ' ' } } OnChange={ event=ChangeFn(event。目标。value)}/} }]我们在antd-components.js文件中声明一个安特德输入的自定义组件，然后在数据表单中引入该自定义表单组件：

init.js

从"表单"导入表单从导入组件/antd-来自的组件。createcustomcomp(components)const config={ formkey : ' paramAddFromAntd '，data: { name: ' '，}，config :[{ type : ' antd-input '，dataKey: 'name '，label: 'Param '，placeholder: '请输入参数，validate: ['必需',/^[a-za-z_{}0-9]$/g]}]}来自ref={ref=this .FormWrap=ref}配置={配置}/发件人使用容器来引入安特德组件库，其原理就是通过容器将安特德组件封装成安特德-输入'自定义组件，然后使用它，这种方式不仅可以用来封装组件库，还可以用来共享一些共用表单组件，可以将常用的复杂表单组件封装在一个共用文件里，然后在不同项目中引用，就可以跨项目共用表单组件。

在自定义组件中，如果需要自定义表单提交数据函数，但是又不能重写提出方法以防覆盖原先的提出方法，所以可以使用modifyDataFn方法来覆盖提出中的提交数据部分。

modifyDataFn: ({changeFn，changeDataFn}，{parent，self })={ let { parent data }=parent parent data=parent data。地图(项目=({ 0.项目，名称为name: self.curData }))变更数据(parent.parentKey，parentData)}处理控制逻辑和联动逻辑

在数据表单数据配置中，有辅助数据的选填字段，该字段为数据表单处理控制逻辑的额外数据，例如在表单内有一个刷新按钮，其实现代码如下：

{ data : } { 0 }，assista data : { refresh param : false }，config :[{ type : ' container '，datakey : ' assista data . refresh param '，render: (curData，config，{changeFn，changedata bn })={ const handleClick=()={ changedata fn(' assista data . refresh param '，true)setTimeout((={ changedata fn(' assista refresh param)。可数据图标类型=' reload '/}/button/Popo ver }/react。片段}}。]}注意：如果要使用assista data中的数据，其dataKey必须以assista data开头，并且必须使用changeDataFn自定义提交assista data。

呈现方法中的嵌套组件配置

{ type: 'container '、dataKey: 'param '、render: (curData、config、{changeFn、changeDataFn、Jsonform })={ return div { Jsonform([{ type : ' input '、datakey:' name '、placeholder: '，请输入param '、validate3360 ['required']，})}/div }这样就可以将组件配置嵌套在容器中，实现更复杂的功能

JSON表单提交数据

非实时表单提交

非实时表单提交是指表单输入后，点击提交按钮，统一提交所有数据。提交方式如下：

函数handleclick () {this。formrefs。getvalue((有效，数据)={//有效表示验证结果，假表示验证失败})}实时表单提交

提交实时表单首先需要注册提交功能：

Componentidmount () {this。formrefs。registersubmit((有效，数据)={console。log(有效，数据)})}然后在配置中设置允许实时提交的字段：

{formkey: ' '，realtimesubmit: true }如果需要在某些表单组件中自定义是否实时提交，则需要在组件配置中将阻止实时提交字段设置为true:

{datakey: ' '，preventsubmit: true }表单的应用场景

表格分类

A.按复杂性分类。简单表单：表单组件是常见的类型，如输入、选择、文本区域等。并且表单组件之间的逻辑是独立的。2.复杂形式：形式成分的内容和相互作用是复杂的，它们之间有复杂的逻辑。

复杂的形式可以分为：1。链接表单，其中前一个表单组件将影响下一个表单的值；2.实时表单，其中表单组件的事件会触发表单的实时提交，比如过滤表单；3.丰富的控制形式，其中有许多控制逻辑

JSON表单最适合的应用场景是简单表单，可以用很少的代码快速构建表单。对于复杂的表单，JSON表单需要使用容器来构建复杂的表单组件，处理复杂的控制逻辑。虽然其代码量优势不明显，但JSON表单可以使其代码清晰，表单组件与表单逻辑完全解耦，便于拉取和维护，共享公共组件，这也带来了很多好处。

到目前为止，JSON表单适用于大多数表单应用场景。

JSON表单解决的问题

表单代码量减少，表单组件无需重复开发，只需输入组件配置即可解耦表单组件和数据，便于子功能的拆分和常用组件的共享，简化了验证功能，只需传入validate字段即可增加自动缓存功能。在我的项目中，我尝试使用原始表单和JSON表单来实现同一个表单页面。在原始表单中，我写了600多行代码，但是在JSON表单中，只有不到150行。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。