🌈 如果你受够了 AntDesign 的原生 Form,那就来试试它吧!一款更懂你的表单提交组件。 项目地址

介绍

目前功能:

  • 简化 AntForm 的使用(众所周知,AntForm 用起来很麻烦…
  • 提交数据之前自动执行校验
  • 通过 Modifier.Modal 提交数据,弹窗会自动管理 loading 和 显隐 状态

计划实现:

  • 提交数据之前自动对比表单数据,如果有变化才会执行并回调数据的异同部分
  • 归一化处理所有需要额外请求的字段,比如:文件和图片的上传

安装

1
npm install ant-modifier

调试

1
2
3
git clone https://github.com/aweiu/ant-modifier.git
yarn install
yarn run start

使用

react >= 16.3.0 webpack es6 开发环境

建议配合 TypeScript 食用!调试本项目你得到的就是一份同时支持 js 和 ts 的工程,所以你可以基于它去改造你的现有项目

Modifier.Form

简化 AntForm 的使用:你不需要写Form.creategetFieldDecorator了!同时提供 Modifier 的表单提交功能

示例

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import * as React from 'react'
import * as Modifier from 'Modifier'
import { Input, Button } from 'antd'

function submit(formData, customData) {
console.log(formData, customData)
return new Promise((resolve) => setTimeout(resolve, 1000))
}

function onSubmit() {
Modifier.Form.submit('modifierForm', 'customData')
}

function App() {
return (
<Modifier.Form name="modifierForm" action={submit}>
<Modifier.Item id="name" rules={[{ required: true }]}>
<Input placeholder="请输入用户名" />
</Modifier.Item>
<Button onClick={onSubmit}>提交</Button>
</Modifier.Form>
)
}

API

Modifier.Form.props.name

可以理解为组件的 id,有了它你才可以方便地调用到组件实例的各种方法

  • 必填
  • 类型:string

Modifier.Form.props.action

拿到表单数据之后你要做什么?比如表单的数据提交过程应当交给它

  • 必填
  • 类型:(formData: 表单数据, customData?: 自定义数据) => any

Modifier.Form.props.…AntFormCreateOption

如果你需要用到 Form.create 的某些特性,直接:

1
<Modifier.Form mapPropsToFields={ mapPropsToFields } onFieldsChange={ onFieldsChange } />

等同于:

1
Form.create({ mapPropsToFields, onFieldsChange })

Modifier.Form.props.…AntFormProps

组件代理了 AntForm 的所有 props,可参考上面链接

Modifier.Form.submit

组件的静态方法,调用它会执行数据提交前的一些准备工作,如表单校验。校验通过后会执行 action

  • 类型:(name: 你定义的 name, customData?: 会回调给 action 的自定义数据) => Promise

    submit 方法会返回一个 Promise 对象,该对象会在 action 执行完毕后 resolve

Modifier.Modal

如果你业务中表单的修改和创建是在弹窗中完成的,那就来用它吧!除了提供简化 AntForm 的功能外,还为你自动管理了 Modal 的状态

示例

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import * as React from 'react'
import * as Modifier from 'Modifier'
import { Input, Button } from 'antd'

function submit(formData, customData) {
console.log(formData, customData)
return new Promise((resolve) => setTimeout(resolve, 1000))
}

function onSubmit() {
Modifier.Modal.show('modifierModal', 'customData')
}

function App() {
return (
<div>
<Modifier.Modal name="modifierModal" action={submit} title="创建用户">
<Form>
<Modifier.Item id="name" rules={[{ required: true }]}>
<Input placeholder="请输入用户名" />
</Modifier.Item>
</Form>
</Modifier.Modal>
<Button onClick={onSubmit}>创建用户</Button>
</div>
)
}

可以看到你唯一需要做的就是在需要它出现的时候去调用 Modifier.Modal.show

API

Modifier.Modal.props.name

Form.props.name

Modifier.Modal.props.action

Form.props.action

Modifier.Modal.props.…AntFormCreateOption

Form.props.AntFormCreateOption

Modifier.Modal.props.…AntModalProps

  • visible
  • confirmLoading
  • onOk
  • onCancel

除了以上属性被「征用」了,组件代理了 AntModal 的所有 props,可参考上面链接

Modifier.Modal.show

组件的静态方法,调用它会使你的弹窗表单变成可见状态,之后的行为同 Form.submit 一致;关闭和 loading 状态由它自己维护

Modifier.Item

功能类似于 AntFormItem

API

Modifier.Item.props.id

getFieldDecoratorid 参数

  • 必填
  • 类型:string

Modifier.Item.props.…GetFieldDecoratorOptions

getFieldDecoratoroptions 参数

jsx
1
2
3
<Modifier.Item id="name" rules={[{ required: true }]} initialValue="Jack">
<Input />
</Modifier.Item>

等同于:

jsx
1
2
3
4
5
6
<Form.Item>
{getFieldDecorator('name', {
rules: [{ required: true }],
initialValue: 'Jack',
})(<Input />)}
</Form.Item>

getForm

ModifierModalForm 共享的静态方法,用于获取某个 Modifier 实例props.form

1
2
3
4
5
6
7
8
import * as Modifier from 'Modifier'

const form = Modifier.getForm('userCreator')
// const form = Modifier.Modal.getForm('userCreator')
// const form = Modifier.Form.getForm('userCreator')
if (form) {
console.log(form.getFieldsValue()) // https://github.com/ant-design/ant-design/blob/master/components/form/Form.tsx#L140
}

相关文章


 评论