Question

我目前正在尝试制作番茄定时器。我在某些计时器上注意到的一项功能是，如果您单击重置时间，它将恢复为默认时间（通常为15分钟）。

我希望它能更高级一些，以便在您单击重置时，它将重置为您将计时器设置为的任何值。

例如，当您打开屏幕时，默认时间是15分钟。如果您增加5分钟，则按开始，然后按重设，它应该重设为20分钟。相反，我的代码将其重置为15。

有人能想到重设时间的方法吗？

抱歉，这是一个不好的解释。预先谢谢你。

到目前为止，这是我使用React Hooks的代码：

import './App.css';

function App() {
  const [session, setSession] = useState(5)
  const [timer, setTimer] = useState(2)
  const [isRunning, setIsRunning] = useState(false)
  const [resetTime, setResetTime] = useState(900)

  let time = new Date(timer * 1000).toISOString().substr(11, 8);

  function sessionIncrement() {
    setSession(prevSession => session + 1)
  }
  function sessionDecrement() {
    if (session > 0) {
      setIsRunning(false)
      setSession(prevSession => prevSession > 0 && prevSession - 1)
    }
  }

  function resetTimer() {
    setIsRunning(false)
    setTimer(resetTime)
  }

  function increment() {
    setIsRunning(false);
    setTimer(prevTimer => prevTimer + 300);
  }

  function decrement() {
    setIsRunning(false);
    setTimer(prevTimer => prevTimer - 300);
  }


  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        setTimer(prevTimer => prevTimer > 0 && prevTimer - 1)
      }, 1000);
      if (timer === 0) {
        sessionDecrement()
        setIsRunning(false)
      }
      return () => clearInterval(interval)
    }
  }, [isRunning, session, timer])

  useEffect(() => {
    setResetTime(timer)
  }, [])


  return (
    <div className="App">
      <h1>Session #{session}</h1>
      <button onClick={() => sessionDecrement()}>-</button>
      <button onClick={() => sessionIncrement()}>+</button>
      <h1>{time}</h1>
      <button onClick={() => setIsRunning(false)} >Pause</button>
      <button onClick={() => setIsRunning(true)}>Start</button>
      <button onClick={() => resetTimer()}>Reset</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => increment()}>+</button>
    </div>
  );
}

export default App;

Answer 1

如果我理解的正确，您只需在resetTime和timer函数中将increment设置为与decrement相同的值。像这样：

import './App.css';

function App() {
  const [session, setSession] = useState(5)
  const [timer, setTimer] = useState(2)
  const [isRunning, setIsRunning] = useState(false)
  const [resetTime, setResetTime] = useState(900)

  let time = new Date(timer * 1000).toISOString().substr(11, 8);

  function sessionIncrement() {
    setSession(prevSession => session + 1)
  }
  function sessionDecrement() {
    if (session > 0) {
      setIsRunning(false)
      setSession(prevSession => prevSession > 0 && prevSession - 1)
    }
  }

  function resetTimer() {
    setIsRunning(false)
    setTimer(resetTime)
  }

  function increment() {
    const newTime = timer + 300
    setIsRunning(false);
    setTimer(newTime);
    setResetTime(newTime)
  }

  function decrement() {
    const newTime = timer - 300
    setIsRunning(false);
    setTimer(newTime);
    setResetTime(newTime)
  }


  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        setTimer(prevTimer => prevTimer > 0 && prevTimer - 1)
      }, 1000);
      if (timer === 0) {
        sessionDecrement()
        setIsRunning(false)
      }
      return () => clearInterval(interval)
    }
  }, [isRunning, session, timer])

  useEffect(() => {
    setResetTime(timer)
  }, [])


  return (
    <div className="App">
      <h1>Session #{session}</h1>
      <button onClick={() => sessionDecrement()}>-</button>
      <button onClick={() => sessionIncrement()}>+</button>
      <h1>{time}</h1>
      <button onClick={() => setIsRunning(false)} >Pause</button>
      <button onClick={() => setIsRunning(true)}>Start</button>
      <button onClick={() => resetTimer()}>Reset</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => increment()}>+</button>
    </div>
  );
}

export default App;

Answer 2

您要做的第一件事是更改计时器并重置时间以使用相同的值：

const initialTime = 900;
const [session, setSession] = useState(5);
const [timer, setTimer] = useState(initialTime);
const [isRunning, setIsRunning] = useState(false);
const [resetTime, setResetTime] = useState(initialTime);

然后，您需要更改增量和减量函数，以便它们更改重置值以及计时器值：

function increment() {
  setIsRunning(false);
  setTimer((prevTimer) => prevTimer + 300);
  setResetTime((prevResetTime) => prevResetTime + 300);
}

function decrement() {
  setIsRunning(false);
  setTimer((prevTimer) => prevTimer - 300);
  setResetTime((prevResetTime) => prevResetTime - 300);
}

如何使用UseEffect React Hooks重置计时器

2 个答案: