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 (
            

                
深度云三期
                

                    
                        }
                            suffix="账号"
                        />
                    

                    
                        }
                        />
                    
                    
                        
                            
                                }
                                    suffix="验证码"
                                />
                            
                        
                        
                        
                            

                                {
                                    this.state.codeList.map((item, index) => {
                                        return (
                                            {item.code}
                                        )
                                    })
                                }
                            
                        
                    
                    
                        登陆
                    
                
            
        )
    }
}

export default index