[英]How I can disable a button in React js for 20 seconds after click
I need disable a button for 20 seconds.我需要禁用一个按钮 20 秒。 When I click, and I get current time, I need that next click could be anable after 20 seconds.当我点击并获得当前时间时,我需要在 20 秒后可以进行下一次点击。 I try useeffect, but it didin't work for me.我尝试了 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>
);
} }
Just use a setTimeout in your onClick handler只需在您的 onClick 处理程序中使用 setTimeout
const [disabled, setDisabled] = useState(false);
...
onClick={() => {e.preventDefault();
setDisabled(true);
setTimeout(() => {
setDisabled(false);
}, 20000)}
};
...
<button disabled={disabled} />
Try using this concept of Vanilla JavaScript!尝试使用 Vanilla JavaScript 的这个概念! I had implemented for 3sec
but similarly it can be implemented for 20sec
.我已经实施了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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.