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 );
效果图