Question

我正在React / Redux中构建一个计时器，我想先用一个按钮清除间隔，然后重新启动它。

process({ getState }, dispatch, done) {
  //clear interval first
  const interval = setInterval(() => {
    dispatch(countdownCalc());
  }, 1000);
}

Answer 1

我们最初开始点击

setClock = () => {
  const currentdate = new Date().getTime();
  this.setState({date:currentdate})

  this.clockCall = setInterval(() => {
    this.incrementClock();
  }, 1000)

}

我们将增加时钟

incrementClock = () => {
var date = new Date();
var n = date.toDateString();
var time = date.toLocaleTimeString();
this.setState({date:time})
}

当组件卸载时，我们将清除间隔。

componentWillUnmount() {
  clearInterval(this.clockCall)
}

添加我们的按钮以便开始。

 <button onClick={() => this.setClock()}> Start </button>

您还可以制作另一项功能

clear = () => {
 clearInterval(this.clockCall)
}

另一种方法是添加状态，以便您可以通过再次单击并使用条件来更改调用哪个函数来清除间隔。

state={clicked:false}

 setClock = () => {
      const currentdate = new Date().getTime();
      this.setState({date:currentdate, clicked:true})

      this.clockCall = setInterval(() => {
        this.incrementClock();
      }, 1000)

    }

  clear = () => {
     clearInterval(this.clockCall)
     this.setState({clicked:false})
    }

   incrementClock = () => {
    var date = new Date();
    var n = date.toDateString();
    var time = date.toLocaleTimeString();
    this.setState({date:time})
    }


<button onClick={this.state.clicked ? this.clear() : this.setClock()}> {this.state.clicked ? <div> Clear </div> : <div> start </div>} </button>

在计时器的一个按钮上清除并设置间隔

1 个答案: