React中实现时间累加按钮重复点击生效的解决方案

当前点击时间按钮只能生效一次的核心原因：addTime函数每次计算结束时间时，都是基于初始的开始时间（startDate + startTime），而非当前已更新的结束时间（endTime）。因此重复点击同一按钮时，结束时间始终停留在“开始时间+单次时长”的结果，无法累加。

修改addTime函数，将计算基准改为当前的结束时间（如果存在），没有结束时间时再回退到开始时间，都不存在则用当前时间。这样每次点击按钮都会在现有结束时间基础上累加时长。

状态定义（保持不变） #

const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
const [showTime, setTime] = useState(false);
const [startTime, setStartTime] = useState("");
const [endTime, setEndTime] = useState("");

时间按钮区域（保持不变） #

<div className={`time-buttons-container ${!showTime ? "hide-buttons" : ""}`}>
    <button className={`time-buttons`} onClick={() => addTime(0, 30)}> + 30 mins</button>
    <button className={`time-buttons`} onClick={() => addTime(1, 0)}>+ 1 hour</button>
    <button className={`time-buttons`} onClick={() => addTime(4, 0)}>+ 4 hours</button>
</div>

注：这里调整了参数传递，30分钟直接传(0,30)更直观，原计算逻辑也能兼容；你也可以改成直接传总分钟数，进一步简化计算。

修改后的累加函数 #

const addTime = (hours, minutes) => {
    // 确定时间计算的基准：优先用当前结束时间，没有则用开始时间，都没有用当前时间
    let baseTime;
    if (endTime) {
        baseTime = new Date(endTime);
    } else if (startTime && startDate) {
        // 拼接开始日期和时间为完整时间对象
        const startFullDate = new Date(startDate);
        startFullDate.setHours(new Date(startTime).getHours(), new Date(startTime).getMinutes());
        baseTime = startFullDate;
    } else {
        // 兜底：如果开始时间也没设置，用当前时间
        baseTime = createDateAsUTC();
    }

    // 计算要增加的毫秒数
    const addMs = (hours * 60 + minutes) * 60 * 1000;
    // 生成新的结束时间
    const newEndTime = new Date(baseTime.getTime() + addMs);

    // 更新结束时间状态（如果开始时间未设置，顺便初始化开始时间）
    if (!startDate || !startTime) {
        setStartDate(new Date(baseTime));
        setStartTime(new Date(baseTime));
    }
    setEndDate(newEndTime);
    setEndTime(newEndTime);
};

关键修改点说明 #

1. 基准时间切换：从固定使用startDate+startTime改为优先使用endTime，实现累加逻辑。
2. 简化时长计算：将hours * minutes * 60 * 1000改为(hours*60 + minutes)*60*1000，更清晰计算总分钟数转毫秒。
3. 兜底处理：当开始时间也未设置时，自动用当前时间作为初始基准，避免报错。
4. 减少不必要的状态更新：不再每次重复设置startDate和startTime，仅在未初始化时设置。

这样修改后，重复点击同一按钮会持续累加对应时长，切换按钮也会基于当前结束时间继续累加，完全符合需求。

内容的提问来源于stack exchange，提问作者Mofoluwasho Kolawole Jimoh