仿唯品会验证码登录倒计时:
tsx代码:
import React, { useEffect, useRef, useState, useCallback } from 'react'
import './style/VerificationCodeLogin.less'
export default function VerificationCodeLogin() {
const intervalRef = useRef<any>(null);
const [count, changeCount] = useState(0);
const textRef = React.useRef<HTMLDivElement | null>(null)
const getTextRef = () => { return textRef.current as HTMLDivElement }
// 组件卸载时清除计时器
useEffect(() => {
return () => {
clearInterval(intervalRef.current);
};
}, []);
useEffect(() => {
if (count < 60) {
getTextRef().style.color = "#9c9ba0"
}
if (count === 59) {
intervalRef.current = setInterval(() => {
changeCount((preCount) => preCount - 1);
}, 1000);