react登陆时随机验证码

import React, { Component } from 'react'
import { Form, Input, Button, Row, Col } from 'antd';
import { UserOutlined, UnlockOutlined, DingtalkOutlined } from '@ant-design/icons';
import util from '../../util/util.js';
import './index.less';
export class index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            codeList: 0,
            loginBut: true
        }
    }


    onFinish = (values) => {
        console.log('Success:', values.Codelist);
        console.log('this.state.codeList', this.state.codeList[0].code + this.state.codeList[1].code + this.state.codeList[2].code + this.state.codeList[3].code);
        // values.CodeList = this.state.codeList
        if (values.Codelist === this.state.codeList[0].code + this.state.codeList[1].code + this.state.codeList[2].code + this.state.codeList[3].code) {
            // alert('ok')
            util.httpRequest({
                url: `${util.API}/login/json`,
                method: 'POST',
                data: {
                    username: values.username,
                    password: values.password,
                },
            })
                .then(res => {
                    if (res) {
                        window.location.hash = `${util.ROUTER}/myData`
                    }
                })
        }
    }

    // 【生命周期】 UNSAFE_componentWillMount 在render之前调用
    UNSAFE_componentWillMount() {
        this.VerificationCode()
    }

    // 验证码
    VerificationCode = () => {
        const codeList = []
        // const chars = 'abcdefhijkmnprstwxyz0123456789'
        const chars = '0123456789'

        const charsLen = chars.length // 数字-10 、 字母+数字-30
        console.log('chars', chars.charAt(8));
        console.log('0-1随机数', Math.random()) // 0-1 之间的随机数 0.3171147866516528
        console.log('乘以10倍的随机数', Math.random() * charsLen) // 0-1 随机数*10倍  3.171147866516528
        console.log('测试Math.floor => 5.9', Math.floor(5.9)) // 向下取整数
        console.log('Math.floor', Math.floor(Math.random() * charsLen)) // 0-10 随机整数

        // 生成
        for (let i = 0; i < 4; i++) {
            const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
            codeList.push({
                code: chars.charAt(Math.floor(Math.random() * charsLen)),
                color: `rgb(${rgb})`,
                // fontSize: '20px',
                // padding: '6px'
            })
        }
        console.log('4个随机数', codeList)
        this.setState({
            codeList: codeList
        })

    }
    getStyle(data) {
        return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }

    refreshCode = () => {
        this.VerificationCode()
    }

    // 验证码校验
    Codelist = (rule, value) => {
        console.log('验证码校验', value);

        if (value === this.state.codeList[0].code + this.state.codeList[1].code + this.state.codeList[2].code + this.state.codeList[3].code) {
            
            this.setState({
                loginBut: false
            })
            return Promise.resolve();
        }

        // this.state.codeList[0].code + this.state.codeList[1].code + this.state.codeList[2].code + this.state.codeList[3].code
        // const enPattern = /^[0-9a-zA-Z_]*$/ // 求只能输入英文字母和数字的正则表达式
        // if (enPattern.test(value)) {
        //     return Promise.resolve();
        // }
        return Promise.reject('验证码错误')
    }

    render() {
        return (
            <div className="loginWrap">
                <h1>深度云三期</h1>
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    style={{ width: '66%' }}
                >
                    <Form.Item name="username" >
                        <Input ref='username'
                            placeholder="账号"
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            suffix="账号"
                        />
                    </Form.Item>

                    <Form.Item name="password" >
                        <Input.Password ref='password'
                            placeholder="密码"
                            prefix={<UnlockOutlined className="site-form-item-icon" />}
                        />
                    </Form.Item>
                    <Row>
                        <Col span={15}>
                            <Form.Item name="Codelist" rules={[{ required: true, validator: this.Codelist }]}>
                                <Input ref="Codelist"
                                    width="200"
                                    placeholder="验证码"
                                    prefix={<DingtalkOutlined className="site-form-item-icon" />}
                                    suffix="验证码"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={1}></Col>
                        <Col span={8}>
                            <div onClick={this.refreshCode} style={{background: '#ddd'}}>
                                {
                                    this.state.codeList.map((item, index) => {
                                        return (
                                            <span key={index} style={{ color: item.color, fontSize: '20px', padding: '0 6px' }}>{item.code}</span>
                                        )
                                    })
                                }
                            </div>
                        </Col>
                    </Row>
                    <Form.Item >
                        <Button disabled={this.state.loginBut} type="primary" htmlType="submit" style={{width: '100%'}}>登陆</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default index