CreateForm.jsx 2.13 KB
Newer Older
bert committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
import React from 'react';
import { Form, Modal, Button } from 'antd';

import CFormItem from './CreateFormItem';

let CForm = React.createClass({
    getInitialState: function() {
        return { visible: false };
    },

    render: function() {
        const self = this;
        const CType = this.props.CType;

        const { getFieldProps } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
        };

        return  CType ?
                <div className="f-create">
                    <Button type="primary" icon="plus-circle-o" onClick={this.showModal}>添加</Button>
                    <Modal title="添加新对象" visible={this.state.visible} onOk={this.handleCreate} onCancel={this.hideModal}>
                        <Form horizontal form={this.props.form}>
                            { 
                                CType.map(function(item){
                                    //return self.dealConfigCType(item);
                                    return <CFormItem key={item.name} getFieldProps={getFieldProps} formItemLayout={formItemLayout} item={item}/>
                                })
                            }
                        </Form>
                    </Modal>
                </div>:
                <div></div>
    },

    handleCreate: function(){

        console.log('收到表单值:', this.props.form.getFieldsValue());

        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }else{
                console.log('Submit!!!');
                this.props.submit(values);
                this.hideModal();
            }
        });
        //this.props.submit(this.props.form.getFieldsValue());
        
    },

    handleReset: function() {
        this.props.form.resetFields();
    },

    showModal: function() {
        this.setState({ visible: true });
    },

    hideModal: function() {
        this.setState({ visible: false });
        this.handleReset();
    }
});
CForm = Form.create()(CForm);

export default CForm;