1. login form
import React from "react"; import {Row, Col} from "antd"; import {Form, Input, Button} from "antd"; import LoginHeader from "./LoginHeader"; import AppFooter from "page/layout/footer/AppFooter"; import "./index.scss"; const FormItem = Form.Item; class LoginForm extends React.Component{ constructor(props){ super(props); }
loginHandler(e) {
e.preventDefault();
let loginInfo = {};
this.props.form.validateFields((err, values) => {
if(!err){
loginInfo = {
username: values.username,
password: values.password
}
}
})
}
render() { const {getFieldDecorator} =this.props.form; return ( <div className="app-layout app-login"> <div className="login-header"> <LoginHeader /> </div> <div className="login-body"> <div className="app-layout-container"> <Row type="flex" justify="center"> <Col span={24}> <div className="login-left"> <img src="" alt="欢迎登陆react reducer demo"/> </div> <div className="login-right"> <Form onSubmit={(e) => this.loginHandler(e)} className="login-form"> <FormItem> {getFieldDecorator('username',{ rules: [{ required: true, message: "username not null" }] })(<Input addonBefore="username" placeholder="please enter username"/>)} </FormItem> <FormItem> {getFieldDecorator('password',{ rules: [{ required: true, message: "password not null" }] })(<Input addonBefore="password" placeholder="please enter password"/>)} </FormItem> <FormItem> <Button className="btn-block" type="primary" htmlType="submit">login</Button> </FormItem> </Form> </div> </Col> </Row> </div> </div> <AppFooter /> </div> ) } } const Login = Form.create()(LoginForm); export default Login;
2. index.scss
@import "../../styles/varibles"; .app-login{ .login-header { background: $bg-color; margin-bottom: 20px; } .login-body { background: $bg-color; min-height: 550px; .login-left { width: 58%; float: left; img { width: 600px; height: 500px; } } .login-right { width: 42%; float: right; height: 500px; border: $border; .login-form { margin: 65px 0 45px 78px; .btn-block { width: 320px; height: 40px; margin-top: 20px; } .btn, .ant-input { height: 40px; } .ant-input-group-addon { width: 82px; background-color: $bg-color; text-align: center; } .ant-input { padding: 0 20px; width: 238px; } } } } }