react 验证码倒计时

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>
  )
}

最后

以上就是刻苦招牌为你收集整理的react 验证码倒计时的全部内容，希望文章能够帮你解决react 验证码倒计时所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。