2017-10-08 48 views
0

我正在使用ReactJS中的番茄鍾式計時器。我已經爲工作計時器和中斷計時器寫出了代碼,但是一旦中斷計時器變爲0,它就會再次自動啓動工作計時器。我如何獲得重置過程並讓用戶再次單擊開始以使工作計時器繼續。下面是tick()函數的代碼,但是一旦中斷計時器結束,它仍然在休息後重新開始。不知道我在做什麼錯,任何幫助表示讚賞!如何重置我的番茄鍾定時器中的打勾功能?

tick() { 
    const timerType = this.state.workTimer ? "work" : "break"; 
    if(this.state[timerType+"Time"]*60 - Math.round(this.state.elapsed/1000) <= 0) { 
     clearInterval(this.ticker); 
     this.setState({ 
     workTimer: !this.state.workTimer, 
     startTime: new Date() 
     }); 
     this.ticker = setInterval(this.tick, 1000); 
    } 
    this.setState({ 
     elapsed: new Date() - this.state.startTime 
    }); 
    if(this.state[timerType+"break"]*60 - Math.round(this.state.elapsed/1000) <= 0) { 
     clearInterval(this.ticker); 
     this.setState({ 
     elapsed: null 
     }); 
    } 
    } 

回答

0

看起來像你的第一個條件,如果在休息之後再次啓動計時器。您可以先添加workTimer檢查,例如statmen

if(this.state[timerType+"Time"]*60 - Math.round(this.state.elapsed/1000) <= 0 && this.state.workTimer) {}