Javascript 我能'；无法在React中暂停倒计时计时器（清除间隔似乎不起作用）

我想把我的手弄脏建一个波莫多罗钟。我现在正试图暂停计时器，但我很难做到这一点。 这是主应用程序组件中的构造函数：

this.state ={
      breakValue: 5,
      sessionValue: 25,
      time: 25*60*1000,
      isRunning: false
    }

现在，该功能的时间正在流逝：

countDown = (timeLeft ) =>{

  this.setState({

    time : timeLeft-1000,


  })

我已经通过道具将此函数传递给控件组件：

countDown={this.countDown}

在Controls组件中，我处理了如下功能：

handleStart = () =>{
 this.props.countDown(this.props.time);
    }

我为SetInterval做了一个单独的函数：

interval = () =>{
   setInterval(this.handleStart,1000)


} 

最后，我将最后一个函数附加到onClick按钮：

handleSetInterval= () =>{
    this.interval();

} 

---

现在计时器在滴答作响，倒计时开始了。但如何随时暂停此计数器？我有另一个带有暂停功能的按钮，我试着用clearInterval编写一个函数，但它不起作用。我应该使用布尔逻辑来启动/停止，还是在主应用程序组件中处理clearInterval？我完全迷路了。谢谢大家的回答。

请记住，当setIntreval进入队列时，这不是一个超级精确的计时器，因此它的回调不会在1000ms时立即调用（这只是意味着它将每隔1000ms排队一次）

工作代码段（根据您的规范，请查看第二个示例以了解可能更好的实践）：

类控件扩展React.Component{
陈述={
myInterval:null
}
startTimer=（）=>{
this.setState（{myInterval:setInterval（this.props.countDown，1000）}）
}
停止计时器=（）=>{
clearInterval（this.state.myInterval）
}
render（）{
返回(
开始
停止
{this.props.time}
)
}
}
类应用程序扩展了React.Component{
陈述={
时间：25*60*1000
}
倒计时=（）=>{
这是我的国家({
时间：this.state.time-1000，
})
}
render（）{
返回
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);

clearInterval
是停止计时器的正确方法。请包括你的尝试，并明确指出哪里出了问题；“不起作用”不是对你的问题的一个有用的陈述。非常感谢你的回复。我有两个问题：组件“计数器”可能是我的“控件”？因为我在我的应用程序上有一个应用程序组件，我在其中显示实际计数器和控件组件（我在其中有开始和停止按钮）。如果创建新状态来处理clearInterval MyTimer，为什么还要呈现this.props.time？那么应该是this.state.myTimer？没有看到您的完整代码，我猜是的，我的计数器是您的“控制”组件，因为它只返回两个启动和停止计数器的按钮（我将this.props.time添加到计数器渲染的底部只是为了显示结果，您可以将其作为this.state.time放置在应用程序组件中）。this.state.myTimer是对setInterval的引用。将其添加到状态允许您调用clearInterval（this.props.myTimer）。另外，如果您先看我的第二个示例，您将能够更好地理解第一个示例中发生的事情，我认为（这就是为什么我建议将与组件相关的状态和方法放在组件本身中的原因）我将myTimer更新为myInterval，计数器现在处于控制状态非常感谢您的帮助。在我的情况下，我还没有研究Redux，所以为了传递状态，我应该像第一次尝试一样使用回调函数吗？