美文网首页
验证码倒计时

验证码倒计时

作者: 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