Javascript 如何通过单击停止setInterval中的计时器，然后再次单击继续？

我对react还不熟悉，我正在尝试编写react组件，该组件有几个特性

用户可以输入一个随机数，然后数字将显示在 佩奇也是

实现一个文本值为“开始”的按钮，单击该按钮后， 显示的数值将每1秒减少一个，并且 文本值将变为“停止”

继续单击按钮，减一将停止并显示按钮的文本值 将变回“开始”

当数字减为0时，自动停止

我已经实现了第一个和第二个特性。但当我尝试单击“停止”以阻止数字减少1时，它不起作用

我想知道，因为我使用了

type=true/false

来指示类型的状态是开始还是停止。因为在启动状态下，数字应该自动减少1。在停止状态下，减少1应停止。因此，计时器功能应根据类型的状态精确

另外，我不确定我是否正确使用了

clearInterval

方法

如果有人能帮我一把，我真的很感激

代码如下：

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
详细信息：[{id:1，编号：'}]，
类型：false
};
this.handleClick=this.handleClick.bind（this）；
}
变更编号=（e，目标）=>{
这是我的国家({
细节：this.state.details.map（细节=>{
if（detail.id==target.id）{
detail.number=e.target.value；
}
返回详细信息；
})
});
};
handleClick=（）=>{
this.setState（prevState=>({
类型：！prevState.type
}));
if（this.state.type==false）{
var myTimer=setInterval(
() =>
这是我的国家({
细节：this.state.details.map（细节=>{
if（detail.id）{
detail.number=parseInt（detail.number）-1；
}
返回详细信息；
})
}),
1000
);
}else if（this.state.type==true）{
清除间隔（myTimer）；
}
};
render（）{
返回(
{this.state.details.map（detail=>{
返回(
编号：{detail.Number}
this.changeNumber（e，detail）}
值={detail.number}
/>
this.handleClick（）}
值={this.state.type？“stop”：“start”}
/>
);
})}
);
}
}
导出默认应用程序；

您需要在

handleClick（）函数的外部声明
var myTimer

所以它有点像：

var myTimer;

...

handleClick = () => {
        this.setState(prevState => ({
          type: !prevState.type
        }));
        if (this.state.type === false) {
          myTimer = setInterval(
            () =>
              this.setState({
                details: this.state.details.map(detail => {
                  if (detail.id) {
                    detail.number = parseInt(detail.number) - 1;
                  }
                  return detail;
                })
              }),
            1000
          );
        } else if (this.state.type === true) {
          clearInterval(myTimer);
        }
      };

谢谢你的帮助。但是我还是有点困惑，你能告诉我应该在哪里声明var myTimer吗？我想谢谢你的帮助，但是我可以问一下为什么我应该在函数范围之外声明var myTimer吗？因为它需要一个更高的范围。这样，当您再次调用同一个函数时，
myTimer
仍然具有间隔（以便您可以清除它）。当您在函数中声明它时，每个函数调用都会创建一个新的
myTimer
实例。所以它不能清除旧的