React.js中如何实现按钮点击后禁用20秒再恢复可点击功能

你原有代码存在两个核心问题：

• 状态初始值设为数组和后续存储的对象类型不匹配，容易触发取值异常
• 没有添加定时器逻辑来在20秒后恢复按钮可点击状态

修正后的完整可运行代码如下：

import { useState } from 'react';

function App() {
  // 定义两个布尔状态分别控制两个按钮的禁用状态
  const [startDisabled, setStartDisabled] = useState(false);
  const [finishDisabled, setFinishDisabled] = useState(false);
  // 存储时间展示数据，初始值和后续存储类型保持一致
  const [time, setTime] = useState({ thisTime: '' });
  const [endTime, setEndTime] = useState({ endTime: '' });

  const startWork = (e) => {
    e.preventDefault();
    // 记录当前点击时间
    const StartTime = {
        thisTime: new Date().toLocaleString(),
    };
    setTime(StartTime);
    // 立即禁用按钮
    setStartDisabled(true);
    // 20秒后自动恢复按钮可点击状态
    setTimeout(() => {
      setStartDisabled(false);
    }, 20000)
  };

  const finishWork = (e) => {
    e.preventDefault();
    // 记录当前点击时间
    const StopTime = {
        endTime: new Date().toLocaleString(),
    };
    setEndTime(StopTime);
    // 立即禁用按钮
    setFinishDisabled(true);
    // 20秒后自动恢复按钮可点击状态
    setTimeout(() => {
      setFinishDisabled(false);
    }, 20000)
  };

  return (
    <div className='App'>
        <div className='startWork'>
            <h1>Start: {time.thisTime}</h1>
            <button type='button' onClick={startWork} disabled={startDisabled}>
                Start work
            </button>
        </div>
        <div className='finishWork' />
        <h1>Finish: {endTime.endTime}</h1>
        <button type='button' onClick={finishWork} disabled={finishDisabled}>
            Finish work
        </button>
    </div>
  );
}

核心逻辑说明：

• 用独立的布尔状态控制按钮禁用属性，比直接用时间字段判断更清晰可控
• 每次点击按钮后先禁用按钮，同时启动setTimeout定时器，计时结束后自动恢复可点击状态
• 修正了状态初始值和后续存储类型不匹配的问题，避免运行时报错

内容的提问来源于stack exchange，提问作者Justinas Astrauskas