我正在使用React Hooks构建一个简单的计时器。我有两个按钮:开始和重置。 当我点击开始按钮时,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 方法中传递一个属性。increment 在 handleStart 函数中定义,因此我无法在 handleReset 函数中访问它。该怎么办?