Necesito desactivar un botón durante 20 segundos. Cuando hago clic y obtengo la hora actual, necesito que el próximo clic pueda ser posible después de 20 segundos. Probé useeffect, pero no funcionó para mí.
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> );}
Simplemente use un setTimeout en su controlador onClick
const [disabled, setDisabled] = useState(false); ... onClick={() => {e.preventDefault(); setDisabled(true); setTimeout(() => { setDisabled(false); }, 20000)} }; ... <button disabled={disabled} />¡Intenta usar este concepto de Vanilla JavaScript! Lo había implementado para 3sec pero de manera similar se puede implementar para 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>