【React入门】【React+Router+Redux+Ant Design】【个人中心项目】（3）Login页面-账号密码登陆

Table of Contents

 

 

 

1. 实现账号密码登录框的基本界面（src/router/login/index.js）

1.1 Tabs组件

1.2 输入框组件

1.3 输入表单组件

1.4 登录按钮

2. 编写账号密码登陆的逻辑

2.1 表单

2.2 为表单增加校验

3. 手机验证码登录框的基本界面

3.1 手机号和验证码输入框

3.1 利用Row和Col标签，把按钮和验证码放到一行里。

3.3 验证码按钮的点击事件

4. 章节回顾

4.1 小结

4.2 细节提高

Link

结果图

---

 

 

1. 实现账号密码登录框的基本界面（src/router/login/index.js）

1.1 Tabs组件

可以使用账号密码登陆，或者用手机登陆。所以应当有一个Tabs，默认是显示账号密码登陆的tab。

在Login/index.js中修改：

import React from 'react'
import { Tabs } from 'antd'
import styles from './index.module.less'
// module 是create react app的要求，它按照文件名来识别。

const { TabPane } = Tabs; // 把TabPane从Tabs中取出。

const Login = () => {
    return (
        <div className={styles.loginContainer}>
            <Tabs defaultActiveKey="1">
                <TabPane tab="账号密码登陆" key="1">
                    Content 1
                </TabPane>
                <TabPane tab="手机号登陆" key="2">
                    Content 2
                </TabPane>
            </Tabs>
        </div>
    )
};

export default Login;

对包裹整个Tabs的div添加样式（还对整个页面添加了背景图片）：

Login/index.module.less:

.loginContainer{
    background-color: rgba(255,255,255,0.4);
    margin: 1em;
    padding: 1em;
    height: 20em;
    width: 25em;
    border-radius: 0.5em;
    display: flex;
    justify-content: center;
    align-items: space-around;
}

App.module.less: （图片来自于https://pixabay.com/zh/的免费正版图片。）

.background {
    background-image: url("https://cdn.pixabay.com/photo/2020/08/27/00/32/bridge-5520899_1280.jpg");
    background-size: cover;
    height: 100vh;
}

可以顺利地切换两种登陆方式了，而且有过得去的样式。

但是老师做的有些不一样：

1. 老师采用了白底+几何图案作为背景

2. 老师通过margin: auto auto实现了居中

3. 老师把Tabs包裹在一个div里，这个div叫login；login又被包裹在login-container中。可能是一种best-practice?

按照老师的思路修改后的Index.module.less如下： 其中为了修改antd的Tabs样式让文字居中，还用了:global 全局作用域。

.loginContainer{
    // background-image: url("https://cdn.pixabay.com/photo/2020/08/27/00/32/bridge-5520899_1280.jpg");
    background-image: url("./background2.png");
    background-repeat: repeat;
    background-size: 100% auto; //图像的宽高相对于父容器的值
    height: 100%; //继承App中的height（100vh）
    display: flex; //用flex来居中子元素
    align-items: center;
    justify-content: center;
    // 注意，居中展示tab也可以用margin: auto auto实现。
    .login{
        background-color: rgba(255,255,255,0.4);
        padding: 1em;
        height: 20em;
        width: 25em;
        border-radius: 0.5em;
        // 还希望tab名字能居中，修改antd属性样式（不是自己写的className）
        // 如果想修改全局样式，要加global，这是因为我们用了CSS Module了。
        :global {
            .ant-tabs .ant-tabs-nav-list{
                margin: auto auto;
            }
        }
    }
}

效果如图，注意Tabs中的两个选项都居中了。

---

1.2 输入框组件

各个输入框都很类似。因此做一个InputItem组件。

这个组件既可以放在Login的components文件夹里（仅供login用），也可以放在src下的components文件夹（比较通用）。

考虑到比较常用，所以直接放到在src下建立的components文件夹里。

在文件：src/components/InputItem/index.js中编写InputItem组件：

目前这个组件里就只有一个antd的Input组件，InputItem还只是个“复读机”。所以用了{...props}来拆开所有传入的属性。

import React from 'react';
import {Input} from 'antd';

const InputItem = (props) => {
    const {placeholder, size, prefix} = props; //占位符
    return (
        <Input {...props}/>
        // 由于只是单纯地往里面塞，所以可以写成 {...props}
        // 它可以代替 
        // <Input placeholder={placeholder} size={size} prefix={prefix}/>
    )
};

export default InputItem;

在Login中使用它： 

import React from 'react'
import { Tabs } from 'antd'
import styles from './index.module.less'
import InputItem from '../../components/InputItem'
// module 是create react app的要求，它按照文件名来识别。
import { UserOutlined, LockTwoTone } from '@ant-design/icons';// 导入的icons

const { TabPane } = Tabs; // 把T