我正在构建一个带有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函数中访问它。该怎么办?
为什么不直接使用挂钩功能?
如已定义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);
}
您可以在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>
);
}