antd - Login

html页
import React, { Component } from 'react';
import { Form, Icon, Input, Button } from 'antd';
import { LoginWrapper } from "./styled";
import {withRouter} from "react-router-dom";

class Login extends Component {

    render() {
        let { getFieldDecorator } = this.props.form;
        return (
            
                

                    

                        
                        
                    
                    

                        
                            {
                                getFieldDecorator("username", {
                                    rules: [
                                        {
                                            required: true, message: "用户名称必须填写"
                                        }
                                    ]
                                })(
                                    }
                                        type="text"
                                        placeholder="Username"
                                    />
                                )
                            }

                        
                        
                            {
                                getFieldDecorator("password", {
                                    rules: [
                                        {
                                            required: true, message: "密码称必须填写"
                                        },
                                        {
                                            pattern:/^\w{5,13}$/,message:"密码格式错误"
                                        }
                                    ]
                                })(
                                    }
                                        type="password"
                                        placeholder="password"
                                    />
                                )
                            }

                        
                        
                            登陆
                        
                    
                

            
        )
    }
    handlerLogin = (e) => {
        e.preventDefault();
        //获取表单中的数据
        this.props.form.validateFields((err, values) => {
          if (!err) {
            // console.log('Received values of form: ', values);
            this.props.handlerLogin(values.username,values.password);
          }
        });
    }
}

export default withRouter(Form.create()(Login));

css页
import styled from "styled-components";
import bg from "@static/timg.jpg";

export const LoginWrapper = styled.div`
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url(${bg});
    &>div{
        width:400px;
        background:rgba(0,0,0,.1);
        border-radius:12px;
        .logo{
            width:100%;
            height:50px;
            display:flex;
            justify-content:center;
            align-items:center;
            img:first-of-type{
                width:32px;
                height:32px;
                margin-right:15px;
            }
            img:last-of-type{
                width:84px;
                height:32px;
            }
        }
    }
`