我需要禁用一個按鈕 20 秒。當我點擊并獲得當前時間時，我需要在 20 秒后可以進行下一次點擊。我嘗試了 useEffect，但它對我不起作用。
function App() {
const [time, setTime] = useState([]);
const [endTime, setEndTime] = useState([]);
const startWork = (e) => {
e.preventDefault();
const StartTime = {
thisTime: new Date().toLocaleString(),
};
setTime(StartTime);
};
const finishWork = (e) => {
e.preventDefault();
const StopTime = {
endTime: new Date().toLocaleString(),
};
setEndTime(StopTime);
};
return (
<div className='App'>
<div className='startWork'>
<h1>Start: {time.thisTime}</h1>
<button type='button' onClick={startWork} disabled={time.thisTime}>
Start work
</button>
</div>
<div className='finishWork' />
<h1>Finish: {endTime.endTime}</h1>
<button type='button' onClick={finishWork} disabled={endTime.endTime}>
Finish work
</button>
</div>
);
}
uj5u.com熱心網友回復：
只需在您的 onClick 處理程式中使用 setTimeout
const [disabled, setDisabled] = useState(false);
...
onClick={() => {e.preventDefault();
setDisabled(true);
setTimeout(() => {
setDisabled(false);
}, 20000)}
};
...
<button disabled={disabled} />
uj5u.com熱心網友回復：
嘗試使用 Vanilla JavaScript 的這個概念！我已經實作了，3sec 但同樣可以為20sec.
let button = document.getElementById('btn');
const wait_20sec = () =>{
setTimeout(function(){ button.setAttribute('disabled', true); }, 3000);//3000ms = 3sec
}
button.addEventListener('click',wait_20sec)<button id="btn">Click Me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/334976.html
標籤：javascript 反应