react中使用定时器

Do vis~

已于 2023-03-14 16:36:01 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端

于 2022-12-20 14:49:58 首次发布

本文链接：https://blog.youkuaiyun.com/gittt/article/details/128384647

该博客展示了如何在React应用中实现一个倒计时功能，包括设置初始秒数、清除定时器以及在倒计时结束后重置按钮状态。通过`useState`和`useEffect`钩子函数来管理组件状态，并在倒计时结束时触发验证码重新发送。用户可以通过点击按钮发送验证码并启动倒计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//let 一个倒计时变量
   let timer
const [second, setSecond] = useState(59) //倒计时秒数
  const [second, setSecond] = useState(59); // 倒计时秒数
 const [timer, setTimer] = useState(''); // d定时器Key
  useEffect(() => {
   setTimer('');
    clearInterval(timer)
    return () =>  clearInterval(timer)
  }, [])
  useEffect((() => {
    if (second > 0 && second < 60) {
    } else {
    setTimer('');
      clearInterval(timer)
      setBtnDisabled(false);
      setSecond(60);
    }
  }), [second])


  
    // 发送验证码，开启倒计时
    const sendCode = () => {
     setTimer(setInterval(() => setSecond((pre) => pre - 1), 1000));
      setBtnDisabled(true)
    }
//使用
 <Form.Item
            name="code"
            label="验证码"
            rules={[
              {
                required: true,
                message: '请输入邮箱中的验证码',
              },
                <Input
              style={{ width: '90%', marginRight: '35px' }}
              placeholder="请输入邮箱中的验证码" />
          </Form.Item>
             <Form.Item>
            <Button style={{fontSize: '12px'}}
             disabled= {btnDisabled} type="primary" onClick={() => {
              getKaptchacode()
              sendCode()
                }}>
                验证码 {second<59?second:''}
                </Button>
          </Form.Item>