antd添加form表单行

import {Button, Icon, Form, Row, Col, Input, Tag, Modal} from "antd";
import React, {Component} from "react";

const FormItem = Form.Item;


const CollectionCreateForm = Form.create()(
    // eslint-disable-next-line
    class extends React.Component {
        render() {
            const {
                visible, onCancel, onCreate, form,
            } = this.props;
            const {getFieldDecorator} = form;
            return (
                <Modal
                    visible={visible}
                    title="Create a new collection"
                    okText="Create"
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form layout="vertical">
                        <FormItem label="hallCode">
                            {getFieldDecorator('hallCode', {
                                rules: [{required: false, message: 'Please input hallCode!'}],
                            })(
                                <Input placeholder="hallCode"/>
                            )}
                        </FormItem>
                        <FormItem label="libraryName">
                            {getFieldDecorator('libraryName', {
                                rules: [{required: false, message: 'Please input libraryName!'}],
                            })(
                                <Input placeholder="libraryName"/>
                            )}
                        </FormItem>
                        <FormItem label="relatedLibraryName">
                            {getFieldDecorator('relatedLibraryName', {
                                rules: [{required: false, message: 'Please input relatedLibraryName!'}],
                            })(
                                <Input placeholder="relatedLibraryName"/>
                            )}
                        </FormItem>
                        <FormItem label="address">
                            {getFieldDecorator('address', {
                                rules: [{required: false, message: 'Please input address!'}],
                            })(
                                <Input placeholder="address"/>
                            )}
                        </FormItem>
                    </Form>

                </Modal>
            );
        }
    }
);


class CollectionsPage extends React.Component {
    state = {
        visible: false,
    };

    showModal = () => {
        this.setState({visible: true});
    }

    handleCancel = () => {
        this.setState({visible: false});
    }

    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            console.log('Received values of form: ', values);
            this.props.addLibrary(values)
            form.resetFields();
            this.setState({visible: false});
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }

    render() {
        return (
            <div>
                <div align="right">
                    <Button type="primary" onClick={this.showModal}>New Collection</Button>
                </div>
                <CollectionCreateForm
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
            </div>
        );
    }
}


class ProjectLibraries extends Component {
    constructor(props) {
        super(props);
        this.state = {uuid: 0, libraries: []}
        this.add = this.add.bind(this)
    }

    add(library) {
        console.log("父组件接收到了library:" + library)
        this.state.libraries.push(library)
        this.setState({libraries: this.state.libraries})
    }


    render() {
        const getFieldDecorator = this.props.getFieldDecorator
        const formItemLayout = this.props.formItemLayout
        const formItems = this.state.libraries.map((value, index) => {
            return (<div>
                <Row gutter={24} type="flex" justify="center">
                    <Col span={6}>
                            <FormItem {...formItemLayout} wrapperCol={{span: 24, offset: 0}}>
                                {getFieldDecorator('projectLibraryMapDtos.hallCode', {
                                    rules: [{required: false, message: 'Please input hallCode!'}],
                                    initialValue: value.hallCode,
                                })(
                                    <Input placeholder="hallCode" disabled/>
                                )}
                            </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} wrapperCol={{span: 24, offset: 0}}>
                            {getFieldDecorator('projectLibraryMapDtos.libraryName', {
                                rules: [{required: false, message: 'Please input libraryName!'}],
                                initialValue: value.libraryName,
                            })(
                                <Input placeholder="馆名" disabled/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} wrapperCol={{span: 24, offset: 0}}>
                            {getFieldDecorator('projectLibraryMapDtos.relatedLibraryName', {
                                rules: [{required: false, message: 'Please input relatedLibraryName!'}],
                                initialValue: value.relatedLibraryName,
                            })(
                                <Input placeholder="关联馆馆号" disabled/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} wrapperCol={{span: 24, offset: 0}}>
                            {getFieldDecorator('projectLibraryMapDtos.address', {
                                rules: [{required: false, message: 'Please input address!'}],
                                initialValue: value.address,
                            })(
                                <Input placeholder="地址" disabled/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
            </div>)
        })
        return (
            <div>
                <Row gutter={24} type="flex" justify="center">
                    <Col span={6}>
                        <div style={{textAlign:"center"}}>hallCode</div>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"center"}}>馆名</div>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"center"}}>关联馆馆号</div>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"center"}}>地址</div>
                    </Col>
                </Row>
                {formItems}
                <CollectionsPage addLibrary={(value) => {
                    this.add(value)
                }}/>
            </div>
        );
    }
}

export default ProjectLibraries;