如何实现按钮仅在特定时间段内启用？（附React按钮代码）

要让按钮只在指定时间段内可点击，你可以通过以下步骤实现：

• 定义允许操作的时间段
  先明确按钮可以启用的开始和结束时间，你可以直接创建两个Date对象，或者从后端接口获取这两个时间值。

• 实时判断当前时间是否在范围内
  在组件中用useState存储按钮的启用状态，再通过useEffect结合定时器，实时检查当前时间是否处于允许的时间段内，更新状态。

• 绑定状态到按钮的disabled属性
  根据计算出的状态控制按钮的禁用状态，还可以给禁用状态的按钮添加额外样式，提升用户体验。

改造后的完整代码示例 #

import { useState, useEffect } from 'react';

function YourComponent() {
  // 定义允许提交的时间段（替换成你需要的具体时间即可）
  const allowedStartTime = new Date('2024-06-01T09:00:00');
  const allowedEndTime = new Date('2024-06-01T18:00:00');
  const [isButtonEnabled, setIsButtonEnabled] = useState(false);

  useEffect(() => {
    // 检查当前时间是否在允许范围内的函数
    const checkTimeRange = () => {
      const now = new Date();
      setIsButtonEnabled(now >= allowedStartTime && now <= allowedEndTime);
    };

    // 初始化时先检查一次
    checkTimeRange();

    // 设置定时器，每分钟检查一次（可根据需求调整间隔）
    const timer = setInterval(checkTimeRange, 60000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, [allowedStartTime, allowedEndTime]);

  const SENDSCORE = () => {
    // 你的提交逻辑
    console.log('提交操作触发');
  };

  return (
    <div className='external-btn-cont'>
      <button
        className={`external-score-btn ${!isButtonEnabled ? 'disabled' : ''}`}
        onClick={SENDSCORE}
        disabled={!isButtonEnabled}
      >
        Submit
      </button>
    </div>
  );
}

export default YourComponent;

补充说明 #

• 如果时间段从后端获取，直接把allowedStartTime和allowedEndTime替换成接口返回的时间字符串（注意转成Date对象）即可。
• 定时器间隔可按需调整，比如不需要高频检查的话，改成每5分钟检查一次也可以。
• 可以给禁用状态的按钮加样式区分：

.external-score-btn.disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

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