web-dev-qa-db-fra.com

clearInterval dans React

Je suis nouveau à React et j'essayais de créer un chronomètre simple avec des boutons de démarrage et d'arrêt. Je me tape la tête contre le mur pour essayer d'effacer l'intervalle avec un événement onClick sur Stop Je déclarerais une variable pour setInterval puis la supprimerais en utilisant clearInterval. Malheureusement, cela ne fonctionne pas. Des conseils? Merci d'avance.

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

vous pouvez ajouter un intervalle à l'état de votre composant et l'effacer à tout moment.

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

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

Dans votre fonction startHandler, vous pouvez faire:

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

et dans votre stopInterval () vous feriez clearInterval(this.myInterval);

9
Daniel Andrei

Vous pouvez utiliser clearInterval(id) pour l'arrêter. Vous devez stocker l'id du setInterval par exemple.

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