web-dev-qa-db-ja.com

ReactのclearInterval

私はReactで新しいです。スタートボタンとストップボタンを備えたシンプルなストップウォッチを作成しようとしていました。壁に頭を叩いて、StopのonClickイベントでclearIntervalを試行しましたボタンです。setIntervalの変数を宣言してから、clearIntervalを使用してそれをクリアします。残念ながら機能しません。ヒントはありますか？よろしくお願いします。

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {time:0}

    this.startHandler = this.startHandler.bind(this);
  }

  getSeconds(time){
    return `0${time%60}`.slice(-2);
  }

  getMinutes(time){
    return Math.floor(time/60);
  }

  startHandler() {
      setInterval(()=>{
      this.setState({time:this.state.time + 1});
    },1000)

  }

  stopHandler() {
    //HOW TO CLEAR INTERVAL HERE????
  }

  render () {
    return (
      <div>
        <h1>{this.getMinutes(this.state.time)}:{this.getSeconds(this.state.time)}</h1>
        <button onClick = {this.startHandler}>START</button>
        <button onClick = {this.stopHandler}>STOP</button>
        <button>RESET</button>
      </div>
    );
  }
}

export default App;
reactjssetintervalclearinterval
12
Lucas

コンポーネントの状態に間隔を追加して、いつでもクリアできます。

componentDidMount(){
  let intervalId = setInterval(this.yourFunction, 1000)
  this.setState({ intervalId: intervalId })
}

componentWillUnmount(){
  clearInterval(this.state.intervalId)
}
16
Dinesh Patil

StartHandler関数では、次のことができます。

_    this.myInterval = setInterval(()=>{
      this.setState({ time: this.state.time + 1 });
    }, 1000);
_

そしてあなたのstopInterval（）ではあなたはclearInterval(this.myInterval);

9
Daniel Andrei

clearInterval(id)を使用して停止できます。 setIntervalのIDを保存する必要があります。

const id = setInterval(() = > {
    this.setState({
        time: this.state.time + 1
    });
}, 1000)
clearInterval(id);
6
Murat Karagöz