反应：关闭点击后不工作

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。 –

反应：关闭点击后不工作

回答

相关问题