rcc react

rcc react.js

import React from 'react';
import style from './basisiStyle.css'
import {Input, Form, Select, Icon, Radio, DatePicker, Button} from 'antd'

const FormItem = Form.Item;
const Option = Select.Option
const RadioGroup = Radio.Group;

class Basics extends React.Component {
    render() {
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        return (
            <div className={style.basisic}>
                <FormItem
                    label={"姓氏"}
                >
                    {getFieldDecorator('beforeName', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user"/>} placeholder="Username" style={{height: 40, width: 250}}/>
                    )}
                </FormItem>
                <FormItem
                    label={"名字"}
                >
                    {getFieldDecorator('lastName', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user"/>} placeholder="Username" style={{height: 40, width: 250}}/>
                    )}
                </FormItem>
                <FormItem
                    label={"邮箱"}
                >
                    {getFieldDecorator('email', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user"/>} placeholder="Username" style={{height: 40, width: 250}}/>
                    )}
                </FormItem>
                <FormItem
                    label={"性别"}
                >
                    {getFieldDecorator('gener', {
                        initialValue: 1,
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <RadioGroup>
                            <Radio value={1}>男</Radio>
                            <Radio value={2}>女</Radio>
                        </RadioGroup>
                    )}
                </FormItem>
                <FormItem
                    label={"出生年月"}
                >
                    {getFieldDecorator('birthday', {
                        // rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <DatePicker size={"large"}/>
                    )}
                </FormItem>

                <Button className={style.btn}>确认更新</Button>
            </div>
        );
    }
}

const WrappedHorizontalLoginForm = Form.create()(Basics);
export default WrappedHorizontalLoginForm;