反应：关开

Question

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>
    )
  }
}

我基本上想要停止当前时间并从停止时恢复它，我不知道出了什么问题。有人可以解释一下为什么定时器在关闭后没有停止点击我新手反应？

Answer 1

问题与范围

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);
}