React秒表需求：初始禁用Reset按钮，启动计时后启用

要实现初始阶段禁用Reset按钮、点击Start后启用的效果，只需通过**计时时间time和状态status**判断来控制按钮的disabled属性即可，具体修改如下：

1. 统一禁用条件 #

初始状态下time为0且status为'start'，此时Reset按钮禁用；点击Start后，无论后续是运行还是暂停状态，只要time>0或status不为'start'，按钮就保持启用；点击Reset回到初始状态后，按钮重新禁用。

2. 修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import './Stopwatch.css';
function Stopwatch() {
  const [status, setStatus] = useState('start');
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [intervalId, setIntervalId] = useState(null);

  useEffect(() => {
    if (!isRunning) {
      clearInterval(intervalId);
    }
  }, [isRunning, intervalId]);

  function start() {
    setIsRunning(true);
    setStatus ('running');
    let startTime = Date.now() - time;
    let id = setInterval(() => {
      setTime(Date.now() - startTime);
    }, 10);
    setIntervalId(id);
  }

  function pause() {
    setStatus('paused');
    setIsRunning(false);
  }

  function resume() {
    setIsRunning(true);
    setStatus('running');
    let startTime = Date.now() - time;
    let id = setInterval(() => {
      setTime(Date.now() - startTime);
    }, 10);
    setIntervalId(id);
  }

  function reset() {
    setTime(0);
    setStatus('start');
    setIsRunning(false);
  }

  let hours = Math.floor((time / (1000 * 60 * 60)) % 24);
  let minutes = Math.floor((time / (1000 * 60)) % 60);
  let seconds = Math.floor((time / 1000) % 60);

  // 提取禁用条件变量，统一管理
  const isResetDisabled = time === 0 && status === 'start';

  return (
    <div>
      <h1>
        <h1><b>React Stopwatch</b></h1>
        {hours < 10 ? '0' + hours : hours}:
        {minutes < 10 ? '0' + minutes : minutes}:
        {seconds < 10 ? '0' + seconds : seconds}
      
      </h1>
      {isRunning ?(
      <>
      <button onClick={pause}>Pause</button>
      <button onClick={reset} disabled={isResetDisabled}>Reset</button>
      </>
      ):
      (status ==='start'?(
        <>
          <button onClick={start}>Start</button>
          <button onClick={reset} disabled={isResetDisabled}>Reset</button>
        </>) : ( <>
          <button onClick={resume}>Resume</button>
          <button onClick={reset} disabled={isResetDisabled}>Reset</button>
          </>)
      ) }
    </div>
  );
}

export default Stopwatch;

效果说明 #

• 页面加载完成后，Reset按钮处于禁用状态，只有Start按钮可点击
• 点击Start开始计时后，Reset按钮自动启用，可随时重置计时
• 点击Reset后，计时清零并回到初始状态，Reset按钮再次禁用

内容的提问来源于stack exchange，提问作者GIRIDARAN T P