javascript - 单击后如何在 React js 中禁用按钮 20 秒
问题描述
我需要禁用一个按钮 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>
);
}
解决方案
尝试使用 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>
推荐阅读
- javascript - 当 body 函数进行条件检查时,应该从 useEffect 钩子返回什么?
- search - 如何使用rest api颤振进行搜索功能
- node.js - 事件发射器Nodejs的单元测试?
- azure-data-factory - Azure datafactory - 触发窗口翻转被阻止
- azure-cosmosdb - Azure cosmos db 支持阿拉伯语、日语、中文、阿拉伯语、西班牙语、法语 CRUD
- flutter - Flutter - 如何检查应用程序是否有新版本?
- laravel - Laravel - 将数组验证为现有数组和 null
- mapbox - 添加我自己的样式在 MapBox Javascript 中不起作用
- react-native - 在没有 forceRTL 的情况下反应原生阿拉伯语(RTL)
- python - 如何在每一秒位置后将张量数组插入张量矩阵