JSON生成Form表单（四）

JSON表单实例方法

静态方法

json表单有一个静态方法：createCustomComp

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

createCustomComp方法时json表单的静态方法，用来引入抽象出来的表单组件。

实例方法

1. registerSubmit 用来注册实时提交函数
2. getValue 用来获取表单数据
3. 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表单解决的问题

1. 减少了表单代码量，不需要重复的开发表单组件，只需要输入组件配置即可
2. 将表单组件和数据解耦，代码结构清晰，便于维护
3. 简化了校验功能，只需要传入validate字段即可
4. 添加了自动缓存功能
5. 提供了一套规则，便于表单组件的抽象和共用

在我的项目，我尝试了使用原始表单和JSON表单两种方式来实现同一个表单页，原始表单我编写了600多行的代码，而在JSON表单中，只有不到150行，所以这是一个值得尝试的方案。