倒计时（三种场景）

自动倒计时（单次）

import React, { useEffect, useState } from ‘react’;

function Demo() {
let [ number, setNumber ] = useState(10)

useEffect(()=>{
let setInt = self.setInterval(()=>{
if(number <= 0){
clearInterval(setInt)
alert(‘111’)
}else{
console.log(number,‘number’)
let nub = number–
setNumber(nub)
}
},1000)
},[])

return (

{number}

);
}

export default Demo;

自动倒计时（循环）

import React, { useEffect, useState } from ‘react’;

function Demo() {
let [number,setNumber] = useState(10)
useEffect(()=>{
let setInt = setInterval(()=>{
if(number <= 0){
setNumber(number+=60)
}else{
console.log(number,‘number’)
let nub = --number
setNumber(nub)
}
},1000)
},[])

return (

{number}

);
}

export default Demo;

倒计时按钮（验证码获取）

import React, { useState, useEffect } from ‘react’;
import { Button } from ‘antd’;

let timeChange;

const Btn = () => {
const [time, setTime] = useState(60);
const [btnDisabled, setBtnDisabled] = useState(false);
const [btnContent, setBtnContent] = useState(‘获取验证码’);

useEffect(() => {
clearInterval(timeChange);
return () => clearInterval(timeChange);
}, []);

useEffect(() => {
if (time > 0 && time < 60) {
setBtnContent(${time}s后重发);
} else {
clearInterval(timeChange);
setBtnDisabled(false);
setTime(60);
setBtnContent(‘获取验证码’);
}
}, [time]);

const getPhoneCaptcha = () => {
// 注意，不要使用 setTime(t-1) ： 闭包问题会导致time一直为59
timeChange = setInterval(() => setTime(t => --t), 1000);
setBtnDisabled(true);
};
return (

{btnContent}

);
};

export default Btn;