antd - 表单校验组件demo

import React, { Component } from 'react';
import { Form, Input,Select } from "antd";
const {Option} = Select;
class ModelForm extends Component {

    render() {
    	//外部传过来的数据
    	console.log(this.props.modelData)
    	//将里边的数据进行解构出来
    	let {aaa,bbb,ccc} = this.props.modelData
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 4 },

            },
            wrapperCol: {
                xs: { span: 20 },

            },
        };
        return (
            <Form {...formItemLayout}>
                <Form.Item label="用户id">
                    {                   
                        getFieldDecorator("booksName", {
                            rules: [
                                {
                                    required:true,
                                    message:"不能为空"
                                }
                            ]
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
                <Form.Item label="用户名称">
                    {
                        getFieldDecorator("username", {
                            rules: [],
                            //与rules同级设置默认值
                            initialValue:aaa
                        	
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
                <Form.Item label="用户信息">
                    {
                        getFieldDecorator("username", {
                            rules: [],
                            //与rules同级设置默认值
                            initialValue:bbb
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
                <Form.Item label="用户状态">
                    {
                        getFieldDecorator("username", {
                            rules: [],
                             //与rules同级设置默认值
                            initialValue:ccc
                        })(
                            <Select>
                                <Option value="出勤">出勤</Option>
                                <Option value="请假">请假</Option>
                                <Option value="旷工">旷工</Option>
                            </Select>
                        )
                    }
                </Form.Item>
                <Form.Item label="用户时间">
                    {
                        getFieldDecorator("username", {
                            rules: []
                        })(
                            <Input />
                        )
                    }
                </Form.Item>
            </Form>
        )
    }
}

export default Form.create()(ModelForm)