@tongdun/react-ui-form
Advanced tools
Readme
基于react框架和antd组件库，实现通用form表单数据提交和精细化布局
npm i @tongdun/react-ui-form
import TdForm from '@tongdun/react-ui-form'
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| layout | 表单布局 | 'horizontal','vertical','inline','grid' | 'horizontal' |
| onSubmit | 数据验证成功后回调事件 | Function(values) | |
| style | 样式 | object | {} |
| itemStyle | FormItem样式 | object | {} |
| className | 类名 | string | '' |
| cols | 格栅布局列数（layout='grid'时有效） | number,string | 1 |
| formItemLayout | 参考antd-form布局实例 | object | {} |
| formConfig | 表单配置 | Array | [] |
数组元素对应页面上各个表单或者非表单的元素个体，每个个体参数配置规则：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 只有时间组件和button需要配置 | 'button','rangePicker','datePicker'，'monthPicker','timePicker','weekPicker' | '' |
| name | 表单提交的参数名（type=rangePicker时可为数组） | string，array | undefind |
| label | label 标签的文本 | string,ReactNode | |
| initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | ||
| rules | 校验规则，参考antd-form getFieldDecorator(id, options) 参数options.rules | string | '' |
| options | 会覆盖所有option配置（包括rules和initialValue）参考antd-form getFieldDecorator(id, options) 参数options.rules | object | |
| format | 时间控件数据返回格式 | string | 各个时间控件默认格式 |
| itemCol | layout = gird时可配置各个元素宽度布局（24为100%） | number,string | 24/cols |
| hasFormItem | 是否包裹FormItem | boolean | true |
| formItemLayout | 子元素自定义布局 参考antd-form布局实例 | object | {} |
| item | react组件或者元素，字符串 | string,ReactNode | |
| items | type=button时单独对button进行处理可定义多个按钮（也可以用item单独定义button） | array |
type=button时 formConfig子元素items配置规则：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 表单操作 | 'submit','reset' | |
| callback | 自定义点击回调 | Function(e:Event) | |
| value | 值 | string,ReactNode,number | '' |
| props | button属性值 可覆盖所有button属性 | object |
handleSubmit (params) {
console.table(params)
// TODO post
}
render () {
// ...
const formConfig = [
{
type: 'rangePicker',
label: '时间范围',
name: ['startDate', 'endDate'],
initialValue: [moment().subtract(3, 'month'), moment()],
item: <RangePicker showTime
style={{width: '100%'}}
format='YYYY-MM-DD'
ranges={{
'30天': [moment().subtract(30, 'days'), moment()]
}}/>
}, {
type: 'datePicker',
label: '时间范围',
name: 'time',
format: 'YYYY-MM-DD HH:mm:ss',
initialValue: moment(),
item: <DatePicker showTime
style={{width: '100%'}}
format='YYYY-MM-DD'
/>
}, {
label: '测试1',
name: 'text1',
item: <Input type='text'/>
}, {
label: '测试2',
name: 'text2',
item: <Input type='text'/>
}, {
label: '测试3',
name: 'text4',
item: <Input type='text'/>
}, {
label: '测试4',
name: '测试4',
item: <Input type='text'/>
}, {
label: '测试5',
name: 'text5',
item: <Input type='text'/>
}, {
label: '测试6',
name: 'text6',
initialValue: '0',
item:
<Select style={{width: '100%'}}>
<Option key={'0'} value={'0'}>请选择</Option>
<Option key={'1'} value={'1'}>1</Option>
</Select>
}, {
type: 'button',
items: [
{
active: 'submit',
value: '查询'
},
{
active: 'reset',
value: '重置'
},
{
value: '跳转',
callback: (e) => {
alert('do something')
}
}
]
},
];
// ...
<TdForm
layout='inline'
formConfig={formConfig}
onSubmit={this.handleSubmit}
/>
handleSubmit (params) {
console.table(params)
// TODO post
}
render () {
// ...
const formConfig = [
{
type: 'rangePicker',
label: '时间范围',
name: ['startDate', 'endDate'],
initialValue: [moment().subtract(3, 'month'), moment()],
item: <RangePicker showTime
style={{width: '100%'}}
format='YYYY-MM-DD'
ranges={{
'30天': [moment().subtract(30, 'days'), moment()]
}}/>
}, {
type: 'datePicker',
label: '时间范围',
name: 'time',
format: 'YYYY-MM-DD HH:mm:ss',
initialValue: moment(),
item: <DatePicker showTime
style={{width: '100%'}}
format='YYYY-MM-DD'
/>
}, {
label: '测试1',
name: 'text1',
item: <Input type='text'/>
}, {
label: '测试2',
name: 'text2',
item: <Input type='text'/>
}, {
label: '测试3',
name: 'text4',
item: <Input type='text'/>
}, {
label: '测试4',
name: 'text4',
item: <Input type='text'/>
}, {
label: '测试5',
name: 'text5',
item: <Input type='text'/>
}, {
label: '测试6',
name: 'text6',
initialValue: '0',
item:
<Select style={{width: '100%'}}>
<Option key={'0'} value={'0'}>请选择</Option>
<Option key={'1'} value={'1'}>1</Option>
</Select>
}, {
type: 'button',
formItemLayout: {
wrapperCol: {
sm: {
span: 18,
offset: 6,
}
}
},
items: [
{
active: 'submit',
value: '查询'
},
{
active: 'reset',
value: '重置'
}
]
},
]
// ...
<TdForm
cols={4}
formItemLayout={{
labelCol: {
sm: {span: 6}
},
wrapperCol: {
sm: {span: 18}
},
}}
formConfig={formConfig}
layout='grid'
onSubmit={this.handleSubmit}
/>
handleSubmit (params) {
console.table(params)
// TODO post
}
render () {
// ...
const formConfig = [
{
type: 'rangePicker',
label: '时间范围',
name: ['startDate', 'endDate'],
rules: [{required: true}],
initialValue: [moment().subtract(3, 'month'), moment()],
item: <RangePicker showTime
style={{width: 350}}
format='YYYY-MM-DD'
ranges={{
'30天': [moment().subtract(30, 'days'), moment()]
}}/>
}, {
type: 'datePicker',
label: '时间范围',
name: 'time',
rules: [{required: true}],
format: 'YYYY-MM-DD HH:mm:ss',
initialValue: moment(),
item: <DatePicker showTime
style={{width: 350}}
format='YYYY-MM-DD'
/>
}, {
label: '测试1',
rules: [{required: true}],
name: 'text1',
item: <Input type='text' style={{width: 350}}/>,
}, {
label: '测试2',
name: 'text2',
item: <Input type='text'/>,
itemCol: 12,
rules: [{required: true}],
formItemLayout: {
labelCol: {
sm: {span: 12}
},
wrapperCol: {
sm: {span: 12}
}
}
}, {
name: 'text3',
item: <Input type='text'/>,
itemCol: 4,
rules: [{required: true}],
formItemLayout: {
wrapperCol: {
sm: {span: 22, offset: 2}
}
}
}, {
item: <span style={{paddingLeft: 10, color: 'red'}}>提示说明内容</span>,
itemCol: 8
}, {
name: 'text4',
label: '测试4',
initialValue: '192.168.11',
item: '192.168.11',
itemCol: 24
}, {
hasFormItem: false,
name: 'xxxxxxxx',
initialValue: '是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是',
item: '我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
}, {
label: '描述',
name: 'text5',
item: <Input type='text'/>,
rules: [{required: true}],
formItemLayout: {
labelCol: {
sm: {span: 12}
},
wrapperCol: {
sm: {span: 12}
}
},
itemCol: 12
}, {
label: '测试6',
name: 'text6',
rules: [{required: true}],
initialValue: '0',
item:
<Select style={{width: 350}}>
<Option key={'0'} value={'0'}>请选择</Option>
<Option key={'1'} value={'1'}>1</Option>
</Select>
}, {
type: 'button',
formItemLayout: {
wrapperCol: {
sm: {
span: 18,
offset: 6,
}
}
},
items: [
{
active: 'submit',
value: '查询'
}
]
},
]
// ...
<TdForm
formItemLayout={{
labelCol: {
sm: {span: 6}
},
wrapperCol: {
sm: {span: 18}
},
}}
formConfig={formConfig}
layout='grid'
onSubmit={this.handleSubmit}
/>
wrappedComponentRef={ref => this.formRef = ref} // this.formRef取得TdForm内部方法
this.formRef.handleSubmit() // 用外部主动触发TdForm内部handleSubmit函数校验并返回数据
handleSubmit (params) {
console.table(params)
// TODO post
}
render () {
// ...
const formConfig = [
{
type: 'rangePicker',
label: '时间范围',
name: ['startDate', 'endDate'],
rules: [{ required: true }],
initialValue: [moment().subtract(3, 'month'), moment()],
item: <RangePicker showTime
style={{ width: 350 }}
format='YYYY-MM-DD'
ranges={{
'30天': [moment().subtract(30, 'days'), moment()]
}}/>
}, {
type: 'datePicker',
label: '时间范围',
name: 'time',
rules: [{ required: true }],
format: 'YYYY-MM-DD HH:mm:ss',
initialValue: moment(),
item: <DatePicker showTime
style={{ width: 350 }}
format='YYYY-MM-DD'
/>
}, {
label: '测试1',
rules: [{ required: true }],
name: 'text1',
item: <Input type='text' style={{ width: 350 }}/>,
}, {
label: '测试2',
name: 'text2',
item: <Input type='text'/>,
itemCol: 12,
rules: [{ required: true }],
formItemLayout: {
labelCol: {
sm: { span: 8 }
},
wrapperCol: {
sm: { span: 16 }
}
}
}, {
name: 'text3',
item: <Input type='text'/>,
itemCol: 4,
rules: [{ required: true }],
formItemLayout: {
wrapperCol: {
sm: { span: 22, offset: 2 }
}
}
}, {
item: <span style={{ paddingLeft: 10, color: 'red' }}>提示说明内容</span>,
itemCol: 8
}, {
name: 'text4',
label: '测试4',
initialValue: '192.168.11',
item: '192.168.11',
itemCol: 24
}, {
label: '测试6',
name: 'text6',
rules: [{ required: true }],
initialValue: '0',
item:
<Select style={{ width: 350 }}>
<Option key={'0'} value={'0'}>请选择</Option>
<Option key={'1'} value={'1'}>1</Option>
</Select>
}
]
// ...
<Modal // 外部引入的模态框
title="Modal"
visible={visible}
onOk={() => {
this.setState({ visible: false })
this.formRef.handleSubmit() // 用外部的Modal内置Button 触发TdForm内部handleSubmit函数校验并返回数据
}}
onCancel={() => this.setState({ visible: false })}
okText="确认"
cancelText="取消">
<TdForm
wrappedComponentRef={ref => this.formRef = ref} // this.formRef取得TdForm内部方法
formItemLayout={{
labelCol: {
sm: { span: 4 }
},
wrapperCol: {
sm: { span: 20 }
},
}}
formConfig={formConfig3}
layout='grid'
onSubmit={this.handleSubmit}
/>
</Modal>
FAQs
基于react和antd组件库，实现通用form表单数据提交和精细化布局
We found that @tongdun/react-ui-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.