JSON生成Form表单（四）

Richard_Gao 发布于2019-08-23 13:39 / 1939人阅读

摘要：表单实例方法静态方法表单有一个静态方法方法时表单的静态方法，用来引入抽象出来的表单组件。首先需要开启实时表单提交，在表单配置中设置为。到目前为止，表单适合大部分的表单应用场景。

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表单判断

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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