antd-常用表单组件

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