集成了antd的配置化表单(思路来源于jsonschema form) 不同的是，简化了配置的书写以及数据的提取
继承了控件Input, Button, Select, Upload等常用控件，可自定义扩展控件
自带校验规则，可扩展校验规则
表单数据自动提取
yarn add react-conf-form
or
npm install react-conf-form
import * as React from 'react'
import Form from 'react-conf-form'
import 'react-conf-form/dist/index.css' // import once
export default class FormDemo extends React.Component {
onSubmit = (data) => { console.log(data) }
render() {
return (
<Form
fields={FIELDS_CONF}
dataSource={DATA_SOURCE}
onSubmit={this.onSubmit}
/>
)
}
}| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| spinning? | boolean | false | 是否显示加载状态 |
| validateOnChange? | boolean | true | 是否在onChange自动进行校验 |
| labelDirection? | 'vertical' | 'horizontal' | horizontal | label位置 |
| labelWidth? | number | 120 | label的宽度 |
| fields | Array<...> | - | fields |
| dataSource? | Object | - | 初始值对象（对应fields的key相应的属性值) |
| onSubmit? | (data) => void | - | 提交(data为最新的值) |
| onChange? | (key, value, data) => void | - | 任意表单项修改触发 |
| onReset? | () => void | - | 重置触发 |
| extendFields? | Array | - | 扩展表单控件 |
| extendValidators? | Array | - | 扩展校验规则 |
onSubmit = (data) => console.log(data)
onChange = (name, value, data) => console.log(name, value, data)
onReset = () => {}
render() {
const FIELDS = [...]
return (
<Form
spinning={false}
validateOnChange={true}
labelDirection="horizontal"
labelWidth={120}
fields={FIELDS}
dataSource={{}}
onSubmit={this.onSubmit}
onChange={this.onChange}
onReset={this.onReset}
extendFields={[]}
extendValidators={[]}
/>
)
}| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| span? | number | 8 | 行内单元格所占珊格，最大24 |
| gutter? | number | 16(px) | 间隔 |
| type? | 'FormButtons' | string | - | 按钮行 / 常规控件行 |
| style? | object | - | 自定义样式 |
| className? | string | - | 自定义样式class |
| display? | string | true | 是否显示 |
| fields | array | 单元格配置 | |
| align? | center | left | right | - | 适用于按钮行(FormButtons), 按钮的对齐方式 |
const FIELDS = [
{ // row
span: 8,
gutter: 16,
display: true,
type: 'fields',
fields: [...], // field's cols
}
]| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| key | string(唯一) | - | field & data对应的key |
| span? | number(1~24) | 继承row | 栅格宽度 |
| offset? | number(1~24) | 0 | 偏移栅格 |
| label | string | - | |
| type | string | - | input, render, timepicker... |
| display? | boolean | true | 是否展示 |
| readOnly? | boolean | false | 是否只读 |
| className? | string | - | css class |
| props | 控件内部的参数 | ||
| className? | - | css class | |
| rules: Array | [] | rules for validation | |
| onChange?: (name, value) => void | - | ||
| beforeChange?: (name, value) => new value | - | onChange触发前调用，用于覆盖处理onChange的值 | |
| onClick?: (data) => any | 当type="button"，点击回调 | ||
| render?: string | Node | (data) => any | 当type="render"，render方法/对象 | ||
| addon?: string | Node | (data) => any | 额外的render | ||
| ...others |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent