# react-easy-antd-form > 基于React，Ant-Design封装的Form业务组件，方便使用。 Latest version **1.2.0** (published 2019-05-21) · MIT license · 0 weekly downloads ## Install ```sh npm install react-easy-antd-form pnpm add react-easy-antd-form yarn add react-easy-antd-form bun add react-easy-antd-form ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2019-05-21 | | First published | 2019-05-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 223.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 16 | | Author | Larry | | Maintainers | larry_zhu | | Keywords | react, antd, Ant-Design, form, ant-desgin | ## Links - npm: https://www.npmjs.com/package/react-easy-antd-form - Repository: https://github.com/lingxiao-Zhu/react-easy-antd-form - Homepage: https://github.com/lingxiao-Zhu/react-easy-antd-form#readme - Issues: https://github.com/lingxiao-Zhu/react-easy-antd-form/issues - npm.io page: https://npm.io/package/react-easy-antd-form ## Dependencies (5) - [antd](https://npm.io/package/antd.md) ^3.17.0 - [react](https://npm.io/package/react.md) ^16.8.6 - [moment](https://npm.io/package/moment.md) ^2.24.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.8.6 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2019-05-21 - 1.1.3 — 2019-05-10 - 1.1.2 — 2019-05-10 - 1.1.1 — 2019-05-10 - 1.1.0 — 2019-05-10 - 1.0.0 — 2019-05-08 ## README # react-easy-antd-form 基于 React，Ant-Design 封装的声明式 Form 业务组件，方便快捷构建表单，减少大量业务代码，并支持 AntD 控件的所有属性。 [![Build Status](https://travis-ci.org/lingxiao-Zhu/react-easy-antd-form.svg?branch=master)](https://travis-ci.org/lingxiao-Zhu/react-easy-antd-form) [![Coverage Status](https://coveralls.io/repos/github/lingxiao-Zhu/react-easy-antd-form/badge.svg?branch=master)](https://coveralls.io/github/lingxiao-Zhu/react-easy-antd-form?branch=master) ![](https://img.shields.io/github/last-commit/lingxiao-Zhu/react-easy-antd-form.svg) ![](https://img.shields.io/github/languages/code-size/lingxiao-Zhu/react-easy-antd-form.svg) ![](https://img.shields.io/npm/dw/react-easy-antd-form.svg) ![](https://img.shields.io/npm/dependency-version/react-easy-antd-form/react.svg) ![](https://img.shields.io/npm/dependency-version/react-easy-antd-form/antd.svg) ## 效果 在 demo 文件夹下的 compare 文件夹中，通过 AntD 的 form 组件和 react-easy-antd-form(简称:reaf)，实现一个通过弹出框新增用户的功能进行对比（只使用了三个控件），AntD 的代码量 109 行，reaf 为 64 行。 可想而知，随着录入数据的增多，代码量的差距会越来越多，维护和升级成本也越来越大。 ![功能截图](/screenshots/1.png) ## 优点 - 通过数据源声明式构建表单，快捷明了，复用性强，减少冗余代码。 - 已封装好常用 form 布局方式，eg：搜索模式、弹框模式、平铺模式。 - 对繁琐组件进行处理，eg：日期组件对日期字符串和时间戳自动进行 moment 类型转换。 - 扩展性强，可以支持 antd 所有 form 组件和属性。 ## 前提 使用此模块的项目需要配置完成 AntD ## 安装 `yarn add react-easy-antd-form` ## 引入 ```javascript 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 传入组件实例，理论上支持所有控件 ```javascript // 此例子中，引入一个自己开发的富文本框。 // RichText组件内部需要调用this.props.onChange，将值赋予表单 import RichText from './RichText'; ... { field: "content", label: "商品详情", type: "Custom", component: RichText } ``` ## 使用 详细使用请查看 demo 文件夹。 ## 有问题？加入我们 QQ 群：684950903（前端开源社区） --- _Source: https://npm.io/package/react-easy-antd-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._