无法读取React State属性

时间:2018-11-05 21:38:52

标签: javascript reactjs

我试图在react中创建一个简单的计时器组件,该组件将从父组件启动和停止。

这是我的父组件

Class Parent extends React.Component{
    state = {
       isRunning: true
    }

        render(){
     return(
         <div>
            <Timer isRunning = {this.state.isRunning} />
         </div>
        )
    }
}

这是我的计时器组件-

class Timer extends React.Component{

  state = {
    isRunning: this.props.isRunning,
    secondElapsed : 65
  }

  getSeconds = function(){
    return ('0'+this.state.secondElapsed % 60).slice(-2);
  }

  getMinutes = function(){
    return Math.floor(this.state.secondElapsed / 60);
  }

  incrementTime = function(){
    this.setState({
      secondElapsed: (this.state.secondElapsed + 1)
    })
  }

  handleTimer(){
    if(this.state.isRunning){
      this.handleTimerStart()
    }
    else{
      this.handleTimerStop()
    }
  }

  handleTimerStart = function(){
    this.timeIncrementer = setInterval(this.incrementTime, 1000);
  }

  handleTimerStop = function(){
    clearInterval(this.timeIncrementer);
  }

  render(){
    return(
      <div>
        <h4>{this.getMinutes()}:{this.getSeconds()}</h4>
        {
          this.handleTimer()
        }
      </div>
    );
  }
}

export default Timer;

我的问题是我在函数增量时间()中不断收到“ 无法读取未定义的属性'secondElapsed'”。

请帮助。

0 个答案:

没有答案