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 验证码倒计时
最新推荐文章于 2024-07-02 14:22:21 发布