美文网首页
验证码倒计时

验证码倒计时

作者: Poppy11 | 来源:发表于2021-08-28 08:55 被阅读0次
    const [time, setTime] = useState(60);
      const [btnDisabled, setBtnDisabled] = useState(false);
      const [btnContent, setBtnContent] = useState('获取短信验证码');
    
    useEffect(() => {
        clearInterval(timeChange);
        return () => clearInterval(timeChange);
      }, []);
    
      useEffect(() => {
        if (time > 0 && time < 60) {
          setBtnContent(`${time}s后重发`);
        } else {
          clearInterval(timeChange);
          setBtnDisabled(false);
          setTime(60);
          setBtnContent('获取短信验证码');
        }
      }, [time]);
    
    const sendSMS = () => {
        timeChange = setInterval(() => setTime(t => --t), 1000);
        setBtnDisabled(true);
      };
    

    相关文章

      网友评论

          本文标题:验证码倒计时

          本文链接:https://www.haomeiwen.com/subject/leyqvltx.html