umi框架编写简单的验证码登录

首先我们需要先创建一个layouts的文件夹，用来存储跳转动画的文件，layouts的文件夹和pages同级。
然后在pages中创建一个login文件夹用来存储登录文件，然后再里面创建login和index文件开始编写代码。
接下来就是废话不多说，上代码

import React, { useState, useEffect, useRef } from 'react'
import './index.less'
import { history } from 'umi'
import { NavBar, AutoCenter, Input, Form, Button,Toast } from 'antd-mobile'
let timer;
export default function Login() {
  const codet = useRef(null);
  const [name, setname] = useState('')
  const [phone, setphone] = useState('')
  const [password, setPass] = useState('')
  const [time, setTime] = useState(5);
  const [disabled, setDisabled] = useState(true)
  const [btnContent, setBtnContent] = useState('获取验证码');
  const [btnDisabled, setBtnDisabled] = useState(false);
  const [sstr, setstr] = useState('');
  const [phonecode, setcode] = useState('');
  function usenum() {
    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (name.length==0) {
        Toast.show({
            icon: 'fail',
            content: '请输入姓名',
        })
    }else
    if (!phoneReg.test(phone)) {
        Toast.show({
            icon: 'fail',
            content: '手机号错误',
        })
    }else
        if (phonecode.length == 0) {
        Toast.show({
            icon: 'fail',
            content: '请输入验证码',
        })
    }
        else
            if (phonecode != sstr) {
                Toast.show({
                    icon: 'fail',
                    content: '验证码错误',
                })
            }
    else {
        Toast.show({
            icon: 'success',
            content: '登录成功',
        })
        history.push({ pathname: '/home', query: { name } })
    }
}

useEffect(() => {
    console.log(name);
    console.log(phone);
    console.log(password);
    if (name.length > 0 & phone.length > 0 & password.length > 0) {
        console.log(2856725468457);
        setDisabled(false)
    } else {
        setDisabled(true)
    }
    return () => {
        setDisabled(false)
    };
}, [name, phone, password]);

useEffect(() => {
    clearInterval(timer);
    return () => clearInterval(timer);
}, []);

useEffect(() => {
    if (time > 0 && time < 60) {
        setBtnContent(`${time}s后重发`);
    } else {
        clearInterval(timer);
        setBtnDisabled(false);
        setTime(60);
    }
}, [time]);


const getCaptcha = () => {
    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!phoneReg.test(phone)) {
        Toast.show({
            icon: 'fail',
            content: '请输入正确的手机号',
        });
    } else {
        if (!phone) return;
        timer = setInterval(() => setTime((pre) => pre - 1), 1000);
        setBtnDisabled(true);
        let wer = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        let sert = '';
        for (let e = 0; e < 6; e++) {
            sert += wer[Math.ceil(Math.random() * wer.length - 1)];
        }
        // setcode(sert);
        setstr(sert);
        Toast.show({
            content: '验证码为' + sert,
        });
    }
};
  return (
    <div>
      <NavBar back={null} backArrow={false}>手机号登录</NavBar>
      <AutoCenter>
        <Form className='autoform' layout='horizontal'
          footer={
            <Button onClick={usenum.bind(this)} block type='submit' color='primary' size='large'>
              提交
            </Button>
          }>
          <Form.Item label='姓名' name='name'
            rules={[{ message: '姓名不能为空' }]}>
            <Input placeholder='请输入姓名' value={name}
              onChange={val => {
                setname(val)
              }} clearable />
          </Form.Item>
          <Form.Item label='手机号'
            rules={[{ message: '手机号不能为空' }]}
            name='phone'>
            <Input placeholder='请输入手机号' value={phone}
              onChange={val => {
                setphone(val)

              }}
              clearable />

          </Form.Item>
          <Form.Item label="短信验证码"
            rules={[{ message: '验证码不能为空' }]}
            extra={
              <Button
                color="warning"
                disabled={btnDisabled}
                onClick={getCaptcha}
              >
                {!btnDisabled ? '获取验证码' : `${time}s后重发`}
              </Button>
            }>
            <Input
              placeholder="请输入验证码"
              value={phonecode}
              ref={codet}
              onChange={(val) => {
                setcode(val);
              }}
            />
          </Form.Item>
        </Form>
      </AutoCenter>
    </div>
  )
}

然后就是样式的代码

.adm-nav-bar {
    --height: 45px;
    --border-bottom: none;
    display: flex;
    align-items: center;
    height: var(--height);
    border-bottom: var(--border-bottom);
    padding: 0 12px;
    white-space: nowrap;
    background-color: darkorchid;
    color: white;
    font-size: 15px;
}

.adm-auto-center {
    display: flex;
    justify-content: center;
    margin-top: 50%;
}

.adm-button .adm-button-warning .adm-button-shape-default {
    --text-color: var(--adm-color-white);
    --background-color: #8f8c8a;
    /* --border-color: var(--color); */
}

.adm-button-warning {
    --color: #dbd7d3;
}

.adm-form {
    --border-inner: solid 1px var(--adm-border-color);
    --border-top: solid 1px var(--adm-border-color);
    --border-bottom: solid 1px var(--adm-border-color);
    --prefix-width: 6.8em;
    ---border-inner: var(--border-inner);
    ---border-top: var(--border-top);
    ---border-bottom: var(--border-bottom);
    ---prefix-width: var(--prefix-width);
    margin-top: 50%;
}