我找不到在 React 中暂停倒数计时器的方法（清除间隔似乎不起作用）[暂停]

Question

我正试图弄脏我的手来建造一个番茄钟。 我现在正试图暂停计时器，但我很难做到这一点。 这是主 App 组件中的构造函数：

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

现在，这个 function 的时间正在流逝：

countDown = (timeLeft ) =>{

  this.setState({

    time : timeLeft-1000,


  })

我已经通过道具将这个 function 传递给 Controls 组件：

countDown={this.countDown}

在 Controls 组件中，我已经像这样处理了 function：

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

我为 SetInterval 做了一个单独的 function：

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


} 

最后，我将最终的 function 附加到 onClick 按钮上：

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

} 

现在计时器正在滴答作响，倒计时正在工作。 但是如何随时暂停这个计数器呢？ 我有另一个带有暂停 function 的按钮，我尝试使用 clearInterval 编写 function 但它不起作用。 我应该使用 boolean 逻辑来启动/停止，还是可以处理 Main App 组件内的 clearInterval ？ 我完全迷路了。 谢谢你们的任何回答。

Answer 1

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

工作片段（根据您的规范，请查看第二个示例以获得更好的实践）：

 class Controls extends React.Component{ state={ myInterval: null } startTimer = () => { this.setState({myInterval: setInterval(this.props.countDown,1000)}) } stopTimer = () => { clearInterval(this.state.myInterval) } render(){ return( <div> <button onClick={this.startTimer}>Start</button> <button onClick={this.stopTimer}>Stop</button> {this.props.time} </div> ) } } class App extends React.Component{ state ={ time: 25*60*1000 } countDown = () => { this.setState({ time: this.state.time-1000, }) } render(){ return <Controls time={this.state.time} countDown={this.countDown}/> } } ReactDOM.render( <App />, document.getElementById("react") );

 <div id='react'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

更好/最佳实践是将与计数器相关的所有内容移动到您的计数器组件中

If you need access to this.state.time elsewhere in your App consider useContext or Redux (according to React team for App level management of state that changes frequently try to use Redux over useContext which is the case here).

应用组件级别的 setState() 可能会在每次更新时重新渲染应用中的所有内容（在这种情况下大约每 1000 毫秒）

更好的例子：

 class Controls extends React.Component{ state={ myInterval: null, time: 25*60*1000 } countDown = () => { this.setState({ time: this.state.time-1000, }) } startTimer = () => { this.setState({myInterval: setInterval(this.countDown,1000)}) } stopTimer = () => { clearInterval(this.state.myInterval) } render(){ return( <div> <button onClick={this.startTimer}>Start</button> <button onClick={this.stopTimer}>Stop</button> {this.state.time} </div> ) } } class App extends React.Component{ render(){ return <Controls/> } } ReactDOM.render( <App />, document.getElementById("react") );

 <div id='react'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>