因此,我们有这个简单的 React 组件,它从父组件接收一个整数。单击该按钮后,我们会在屏幕上显示整数并开始倒计时。
问题是如何停止倒计时。在阅读其他 SO 帖子时,我发现了clearInterval(),但似乎我在这里遗漏了一些东西。
任何帮助将不胜感激。如果有人好心地向我解释为什么示例代码不能按预期工作,将获得奖励积分。
import React from "react";
export default class TestInterval extends React.Component {
constructor(props) {
super(props);
this.state = {
countDown: this.props.countDown, // An integer from father component
}
}
timer = () => {
setInterval(() => {
if (this.state.countDown === 0) {
this.stopCountDown();
}
this.setState( prevState => ({
countDown: prevState.countDown - 1,
}));
}, 1000)
}
startCountDown = () => {
this.timer();
}
stopCountDown = () => {
clearInterval(this.timer); // Not working
}
render () …Run Code Online (Sandbox Code Playgroud)