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}/>