import React, { useState, useEffect } from 'react';
const
Countdown = () => {
const [
countdown, set
Countdown] = useState(10); // 初始化倒
计时为10秒
const [isCounting, setIsCounting] = useState(false); // 是否正在倒
计时
const [isSoldOut, setIsSoldOut] = useState(false); // 是否已售罄
useEffect(() => {
if (isCounting) {
const timer = setInterval(() => {
set
Countdown(prev
Countdown => prev
Countdown - 1);
}, 1000);
return () => clearInterval(timer);
}
}, [isCounting]);
const handleButtonClick = () => {
setIsCounting(true);
};
const handle
CountdownEnd = () => {
setIsCounting(false);
setIsSoldOut(true);
};
return (
<div>
<div>{
countdown}</div>
{!isSoldOut && (
<button onClick={handleButtonClick} disabled={isCounting}>
{isCounting ? `${
countdown}s 后抢购` : '抢购'}
</button>
)}
{isSoldOut && <div>已售罄</div>}
</div>
);
};
export default
Countdown;
扫一扫
2404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
