Перезапустите таймер после обратного отсчета в Reactjs - PullRequest
Новая
       6

Перезапустите таймер после обратного отсчета в Reactjs

0 голосов
/ 24 мая 2018

Я работаю над простым счетчиком, который выдает модальное окно и снова закрывается после того, как таймер в модальном режиме достигает нуля. Моя проблема в том, что я не знаю, как перезапустить первый счетчик.

Надеюсь, выпойми меня.

Спасибо.

ОБРАЗЕЦ КОДА 

  componentWillMount() {
    this.timer = setInterval(this.countDown, 1000);
    this.setState({ seconds: this.props.time });
  }
  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
  }
  countDown() {
    // Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds
    });

    // Check if we're at zero.
    if (seconds === 0) {
      clearInterval(this.timer);
      this.setState({
        visible: true
      });
      this.interval = setInterval(() => {
        this.setState({ currentCount: this.state.currentCount - 1 });
        if (this.state.currentCount === 0) {
          clearInterval(this.interval);
          this.setState({ visible: false });
        }
      }, 1000);
    }
  }

1 Ответ

0 голосов
/ 24 мая 2018

извлекает содержимое componentWillMount и помещает его в другую функцию: 

  componentWillMount() {
    this.foo();
  }

  foo() {
    this.timer = setInterval(this.countDown, 1000);
    this.setState({ seconds: this.props.time });
  }

, затем вы должны вызвать this.foo (), когда интервал достигает 0: 

  this.interval = setInterval(() => {
    this.setState({ currentCount: this.state.currentCount - 1 });
    if (this.state.currentCount === 0) {
      clearInterval(this.interval);
      this.setState({ visible: false });
      this.foo();
    }
  }, 1000);
...