react发送验证码案例

最新推荐文章于 2024-08-29 13:14:07 发布

YaNglIN123i

最新推荐文章于 2024-08-29 13:14:07 发布

阅读量684

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/YaNglIN123i/article/details/127999434

版权

1，在登录页面中通常会有手机号验证码登录的情况，今天在写这个效果时遇到了定时器无法更新状态的问题。

以下为完整代码

import React, { useState } from 'react';

const Index = () => {
    const [VCodeTime, setVCodeTime] = useState(3);
    const [sendSwitch, setSendSwitch] = useState(true);


    const sendCode =  () => {
        if(sendSwitch){
            setSendSwitch(false);
            const timer = setInterval(() => {
                setVCodeTime(VCodeTime - 1);
                if (VCodeTime === 0) {
                    clearInterval(timer);
                    setVCodeTime(3);
                    setSendSwitch(true);
                }
            }, 1000);
        }
        return

    };
    return (
        <div style={{ display: 'flex' }}>
            <input />
            <div
                style={sendSwitch ? { color: 'blue' } : { color: '#9999', cursor: 'not-allowed', left: '250px' }}
                onClick={sendCode}
            >
                发送验证码 {sendSwitch ? '' : `${VCodeTime}`}
            </div>
        </div>
    );
};

export default Index;

在这个点击后的sendCode函数中，控制发送验证码按钮被点击之后为禁止再次点击，会进入倒计时状态等待计时结束再将按钮状态改为可以点击，

但是在这个这个定时器中 setVCodeTime(VCodeTime - 1); 这段代码只会被执行一次，在定时器中log也是最初始的数据，没有按想法逐次递减，其中的原因不是特别理解我只能写出解决方案。

2，解决方案

以下为完整代码

import React, { useState } from 'react';

const Index = () => {
    const [VCodeTime, setVCodeTime] = useState(3);
    const [sendSwitch, setSendSwitch] = useState(true);


    const sendCode =  () => {
      if (sendSwitch) {
    setSendSwitch(!sendSwitch);
    let time = 3
    let timer =setInterval(() => {
        time--;
        setVCodeTime(time);
        if (time === 0) {
            clearInterval(timer);
            setVCodeTime(3);
            setSendSwitch(true);
        }
    }, 1000);
}
        return

    };
    return (
        <div style={{ display: 'flex' }}>
            <input />
            <div
                style={sendSwitch ? { color: 'blue' } : { color: '#9999', cursor: 'not-allowed', left: '250px' }}
                onClick={sendCode}
            >
                发送验证码 {sendSwitch ? '' : `${VCodeTime}`}
            </div>
        </div>
    );
};

export default Index;

就是在这个sendCode函数中生命一个变量，然后在定时器中通过 -- 进行累减在set就可以达到效果了