Ant design 组件开发

　　ant design是蚂蚁金服团队开源的react UI组件库。ant design的项目实践也相当多，除了蚂蚁金服外还有美团等大型企业在用这个UI库。我们公司选择这个UI库来结合react和ES6进行开发，因此做了个demo出来分享一下

　　demo链接 https://github.com/nurdun/antd-react-login-component-.git

项目目录

login组件代码

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import  './login.less'

const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            
            var numFormat =new RegExp('/^[1][34578][0-9]{9}$/');
            var num = values.userName;
            if(!err){
                console.log(values.userName);
                console.log('Received values of form:', values);
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form  onSubmit={this.handleSubmit} className="login-form logBox">
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{required: true,pattern:/^[1][34578][0-9]{9}$/,message: '请输入正确的手机号!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="手机号" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入你的密码!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                    )}
                </FormItem>
                <FormItem className="pass_opt">
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>记住密码</Checkbox>
                    )}
                    <a className="login-form-forgot" href="">忘记密码？</a>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                     <a href="">注册</a>
                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

export default WrappedNormalLoginForm;

index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import WrappedNormalLoginForm from './component/login/login';
import './less/index.less';

ReactDOM.render(
  <WrappedNormalLoginForm />,
  document.body
);

效果图