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