React-easy-antd-form NPM

react-easy-antd-form

基于 React，Ant-Design 封装的声明式 Form 业务组件，方便快捷构建表单，减少大量业务代码，并支持 AntD 控件的所有属性。

npm.io npm.io npm.io npm.io npm.io

效果

在 demo 文件夹下的 compare 文件夹中，通过 AntD 的 form 组件和 react-easy-antd-form(简称:reaf)，实现一个通过弹出框新增用户的功能进行对比（只使用了三个控件），AntD 的代码量 109 行，reaf 为 64 行。可想而知，随着录入数据的增多，代码量的差距会越来越多，维护和升级成本也越来越大。

功能截图

优点

通过数据源声明式构建表单，快捷明了，复用性强，减少冗余代码。
已封装好常用 form 布局方式，eg：搜索模式、弹框模式、平铺模式。
对繁琐组件进行处理，eg：日期组件对日期字符串和时间戳自动进行 moment 类型转换。
扩展性强，可以支持 antd 所有 form 组件和属性。

前提

使用此模块的项目需要配置完成 AntD

安装

yarn add react-easy-antd-form

引入

import Form from "react-easy-antd-form";

参数

名称	说明	类型	默认值
fields	需要渲染出的表单列表	数组field，field 类型见下方	null，必传
mode	表单排列方式	'default', 'search', 'plain'	'default'
onSubmit	数据验证成功后回调事件，能接受到数据；而且传入后表单会渲染内置 Button, 如果函数中返回一个 promise， button 还会自动管理 loading 效果	Function(values)	null
isModal	是否以弹窗模式展示	boolean	false
title	isModal=true 时，弹框的名称	string	form 提交
visible	isModal=true 时，对话框是否可见	boolean	false
modalWidth	isModal=true 时，弹框的宽度	number	520
onCancel	isModal=true 时，点击遮罩层或右上角叉或取消按钮的回调，一般用于设置 visible 为 false	function	null

field 结构

名称	说明	类型	默认值
field	表单字段，用于提交后台	string	null，必传
label	字段展示名称	string	null，必传
initialValue	默认值		null
antProps	支持 AntD 控件自带的所有属性	eg：{ addonBefore: 'Http://' }	null
required	是否必填	boolean	true
type	控件类型	具体描述在下方	'Input'
separate	组件是否单独一行排列，用于富文本等大控件，仅当 mode=plain 有效	boolean	false
options	type=Radio、Select、Checkbox 时，选项数组	{ label: '男', value:'1' },{ label: '女', value:'2' }	null
component	type=Custom 时，传入的自定义组件。组件接受的 props 属性：value 和 onChange。	`CustomComponent`	null
format	type=DatePicker 或者 RangePicker 时，日期格式	string	'YYYY-MM-DD'

控件类型 ‘type’ 说明

组件内部已经封装好'Checkbox', 'RangePicker', 'DatePicker','Radio', 'Select', 'InputNumber', 'Custom', 'Input'
'Custom'为自定义组件类型
通过 type='Custom'，component 传入组件实例，理论上支持所有控件

// 此例子中，引入一个自己开发的富文本框。
// RichText组件内部需要调用this.props.onChange，将值赋予表单
import RichText from './RichText';
...
{
    field: "content",
    label: "商品详情",
    type: "Custom",
    component: RichText
}