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表单默认不是实时表单。

{    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行，所以这是一个值得尝试的方案。