Login.jsx

import React from 'react';

import { Form, Icon, Input, Button } from 'antd';
import 'antd/dist/antd.css';
import './resources/style/css/login.css';

class Login extends React.Component {
  _validateFromSubmitFn = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this._getFormSubmit(values);
      }
    });
  };

  _getFormSubmit = value => {
    this.props.getFormSubmitFn(value);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <React.Fragment>
        <Form onSubmit={this._validateFromSubmitFn} className="login-form">
          <Form.Item>
            {getFieldDecorator('userName', {
              rules: [
                { required: true, message: 'Please input your username !!!' }
              ]
            })(
              <Input
                prefix={
                  <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                placeholder="Username"
                autoFocus
                autoComplete="off"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [
                { required: true, message: 'Please input your Password!' }
              ]
            })(
              <Input
                prefix={
                  <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                type="password"
                placeholder="Password"
                autoComplete="off"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </React.Fragment>
    );
  }
}

const WrappedLoginForm = Form.create({ name: 'normal_login' })(Login);
export default WrappedLoginForm;