react 验证码倒计时

最新推荐文章于 2024-07-02 14:22:21 发布

南城夏季

最新推荐文章于 2024-07-02 14:22:21 发布

阅读量999

点赞数

分类专栏：问题笔记业务文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39818813/article/details/127516266

版权

问题同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

业务

61 篇文章 1 订阅

订阅专栏

笔记

39 篇文章 0 订阅

订阅专栏

const app = () => {
  let timer //验证码定时器
  const [second, setSecond] = useState(59) //倒计时秒数
  const [btnDisabled, setBtnDisabled] = useState(false) //按钮是否可点击，false可点击

  // 初始化时清除定时器
  useEffect(() => {
    clearInterval(timer)
    return () => clearInterval(timer)
  }, [])

 // 监听秒数的变动
  useEffect(() => {
    if (second > 0 && second < 60) {
    } else {
      // 定时器超过时间后，可以重新发送验证码
      clearInterval(timer)
      // 可点击
      setBtnDisabled(false)
      setSecond(60)
    }
  }, [second])

  // 发送验证码，开启倒计时
  const sendCode = () => {
    // 倒计时递减
    timer = setInterval(() => setSecond((pre) => pre - 1), 1000)
    // 不可点击
    setBtnDisabled(true)
  }
  return (
     <Button  disabled={btnDisabled} onClick={() => { sendCode()}}>
        {!btnDisabled ? '获取验证码' : `${second}s后重发`}
     </Button>
  )
}