react 60s倒计时完清空倒计时
时间: 2023-10-22 22:09:11 浏览: 43
在React中实现60秒倒计时并清空倒计时的方法如下:首先,需要使用useState来定义一个计时器的初始值,然后使用useRef来记录时间的定时器。接着,在每次倒计时1秒后,页面上要执行倒计时秒数变化的功能,可以使用setCount函数来更新计时器的值。最后,在倒计时完成后,需要清空定时器并重新将计时器设置为60秒。
代码如下:
```
import { useState, useRef, useEffect } from "react";
const Timer = () => {
const timerCount = 60; // 默认60秒
const [count, setCount] = useState(timerCount);
const timerRef = useRef(null); // 记录时间的定时器
const cutCount = () => {
setCount((prevState) => prevState - 1); };
const sendCode = () => {
cutCount();
timerRef.current = setInterval(cutCount, 1000);
};
useEffect(() => {
if (count === 0) {
clearInterval(timerRef.current);
setCount(timerCount);
}
}, [count]);
return (
<div>
<button onClick={sendCode}>发送验证码</button>
<p>{count}秒后重新发送</p>
</div>
);
};
export default Timer;
```