如何清除单击按钮时的反应钩中的Interval

问题描述 投票:1回答:2

我正在构建一个带有react挂钩的简单计时器。我有两个按钮启动和重置。单击“开始”按钮,计时器启动后,handleStart函数运行良好,但是单击“重置”按钮后,我无法弄清楚如何重置计时器。这是我的代码

const App = () => {
  const [timer, setTimer] = useState(0)

  const handleStart = () => {
   let increment = setInterval(() => {
   setTimer((timer) => timer + 1)
  }, 1000)
}

const handleReset = () => {
  clearInterval(increment) // increment is undefined
  setTimer(0)
}

return (
  <div className="App">
    <p>Timer: {timer}</p>
    <button onClick={handleStart}>Start</button>
    <button onClick={handleReset}>Reset</button>
  </div>
);
}

为了停止或重置计时器,我需要在clearInterval方法中传递一个属性。在handleStart函数中定义了增量,因此我无法在handleReset函数中访问它。该怎么办?

javascript reactjs timer react-hooks
2个回答
0
投票

为什么不直接使用挂钩功能?

如已定义interval状态,请定义timer状态。

const [intervalval, setIntervalval] = useState()

现在您在handleStart中设置状态,并在clearinterval中可以访问修改后的状态。

const handleStart = () => {
   let increment = setInterval(() => {
       setTimer((timer) => timer + 1)
   }, 1000);
   setIntervalval(increment);
}


const handleReset = () => {
      clearInterval(intervalval);
      setTimer(0);
}

0
投票

您可以在ref中设置timerId,并在handleReset函数中使用它。目前,为您定义的增量值是不确定的,因为您已在handleStart函数中声明了该值,因此,如果此变量限于此函数,则请在scopre中声明。

另外,您不能直接在App组件内部将其定义为变量,因为当App组件重新渲染时,它将被重置。这是ref派上用场的地方。

下面是一个示例实现

const App = () => {
  const [timer, setTimer] = useState(0)
  const increment = useRef(null);
  const handleStart = () => {
   increment.current = setInterval(() => {
   setTimer((timer) => timer + 1)
  }, 1000)
}

const handleReset = () => {
  clearInterval(increment.current);
  setTimer(0);
}

return (
  <div className="App">
    <p>Timer: {timer}</p>
    <button onClick={handleStart}>Start</button>
    <button onClick={handleReset}>Reset</button>
  </div>
);
}
© www.soinside.com 2019 - 2024. All rights reserved.