反應：關閉點擊後不工作

class Time extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 

     isButtonOn: true, 
     timeNow: null 

    } 
    this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
    this.setState(prev => ({ 
     isButtonOn: !prev.isButtonOn 
    })); 
    this.handleOnClick(); 
    this.handleOffClick(); 
    } 

    handleOnClick() { 

     var myTime = setInterval(() => this.setState({timeNow: new Date().toLocaleTimeString()}), 1000) 
    } 
    handleOffClick() { 

    clearInterval(myTime); 

    } 
    render() { 
    var button = (this.state.isButtonOn ? 'ON' : 'OFF'); 
    return (
     <div> 
     <button onClick={this.handleClick}> 
      {button} 
     </button>{this.state.timeNow} 
     </div> 
    ) 
    } 
}

我基本上想停止當前的時間，並從它停止的時間恢復它，我不知道什麼是錯的，有人可以解釋我爲什麼計時器不停止後關閉點擊我是新的反應？反應：關閉點擊後不工作

來源

2017-10-05 Rakzzzz

集'myTime'爲'this.myTime'。 'handleOffClick'對'handleOnClick'中設置的內容沒有「神奇」的訪問權限。我很驚訝'handleOffClick'不會引發錯誤。我現在看起來更近了，很多東西都關閉了... – Andrew

我試過了@Andrew – Rakzzzz

請編輯你的問題並解釋你正在期待的'handleClick'正在做什麼。 – Andrew

問題是與範圍

handleOnClick() { 
    var myTime = setInterval(() => this.setState({timeNow: new Date().toLocaleTimeString()}), 1000) 
} 

handleOffClick() { 
    clearInterval(myTime); 
}

您已經定義了handleOnClick內指明MyTime對應，應該是這樣的功能之外，或state 和您試圖訪問handleOffClick函數變量，因此它不會清除任何超時。

解決方案：（如@andrew在評論建議）

constructor(props) { 
    ... 
    this.myTime; 
} 
handleOnClick() { 
    this.myTime = setInterval(() => this.setState({timeNow: new Date().toLocaleTimeString()}), 1000) 
} 

handleOffClick() { 
    clearInterval(this.myTime); 
}

來源

2017-10-05 04:05:04

Please upvote and accpet the answer，if it does not help，please let me know。 –

反應：關閉點擊後不工作

回答

相關問題