basicFormUtil.js
import React from 'react'
import { Form, Input, Tooltip, Icon, Cascader, Select,Radio, Row, Col,DatePicker, Checkbox, Button, AutoComplete} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { Option } = Select;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const { MonthPicker, RangePicker,WeekPicker } = DatePicker;
class basicFormUtil extends React.Component{
constructor(props){
super(props);
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
getInput(item){
if(item.tag =="Input"){
return <Input {...item.props }/>
}else if(item.tag =="TextArea"){
return <TextArea {...item.props }/>
}else if(item.tag =="Checkbox"){
return <CheckboxGroup {...item.props } />
}else if(item.tag =="Radio"){
return <RadioGroup {...item.props } />
}else if(item.tag =="Select"){
const options = item.props.options.map(d => <Option key={d.value}>{d.label}</Option>);
return <Select {...item.props }>{options}</Select>
}else if(item.tag =="RangePicker"){
return <RangePicker {...item.props }/>
}else if(item.tag =="DatePicker"){
return <DatePicker {...item.props }/>
}else if(item.tag =="Button"){
return <Button {...item.props }>{item.props.text}</Button>
}else{
return <div style={{color:"red"}}>表单配置信息有误</div>
}
}
getElement (){
const { getFieldDecorator } = this.props.form;
let elements = []
this.props.formItme.forEach((item,index)=>{
if(item.tag){
elements.push(
<Form.Item
key={item.tag+index}
{...item.tailFormItemLayout}
label={item.lable}
>
{getFieldDecorator(item.id, item.getFieldDecoratorOption)(
this.getInput(item)
)}
</Form.Item>
)
}
})
return elements
}
render(){
return(
<Form {...this.props.formItemLayout} onSubmit={this.handleSubmit}>
{this.getElement( )}
</Form>
)
}
}
const WrappedBasicForm = Form.create({ name: 'basicForm' })(basicFormUtil);
export default WrappedBasicForm;
调用basicFormUtil.js
const formItemLayout = {
labelCol: {
md: { span: 24 },
lg: { span:3 },
xl: { span:3 },
},
wrapperCol: {
md: { span: 24 },
lg: { span: 15 },
xl: { span: 15 },
},
};
const tailFormItemLayout = {
wrapperCol: {
md: {
offset: 0,
},
lg: {
offset: 3,
},
},
};
//form配置
const formOption = [
{
tag:"Input",
lable:"名称",
id:"name",
//表单的属性按照antd api加入
props:{
type:"text",
placeholder:"请输入名称",
},
//getFieldDecoratorOption参数按照antd api加入
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"Input",
lable:"URL",
id:"url",
props:{
type:"text",
placeholder:"请输入URL",
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"TextArea",
lable:"描述",
id:"desc",
props:{
type:"text",
placeholder:"请输入描述",
},
},{
tag:"Checkbox",
lable:"多选",
id:"Checkbox",
placeholder:"Checkbox",
props:{
placeholder:"Checkbox",
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
]
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输选择"
}
]
}
},{
tag:"Radio",
lable:"单选",
id:"Radio",
props:{
placeholder:"Radio",
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
]
},
},{
tag:"Select",
lable:"Select",
id:"Select",
props:{
placeholder:"Select",
mode:"multiple",
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
]
},
},{
tag:"DatePicker",
lable:"DatePicker ",
id:"DatePicker",
props:{
placeholder:"选择日期",
format:'YYYY/MM/DD',
onChange:this.onchange
}
},{
tag:"RangePicker",
lable:"RangePicker ",
id:"RangePicker",
props:{
placeholder:"选择日期",
format:'YYYY/MM/DD',
onChange:this.onchange
}
},{
tag:"Button",
id:"submit",
tailFormItemLayout:tailFormItemLayout,
props:{
text:"提交",
type:"primary",
htmlType:"submit"
}
}
]
<BasicFormUtil
//布局
formItemLayout={formItemLayout}
//form内容
formItme={formOption}
/>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。