Обратный отсчет на модал - PullRequest
Новая
       10

Обратный отсчет на модал

0 голосов
/ 27 августа 2018 

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import { setInterval } from 'timers';

export default class LogoutModal extends Component {
  state = { timer};
  componentDidMount() {
    setInterval(() => this.today(), 1000);
  }

  today() {
    this.setState({
      timer:this.state.timer - 1
    });
  }

  render() {
    return (
      <Modal
        open={this.props.handleOpen}
        onClose={this.props.handleClose}
        basic
        size="small"
      >
        <Header icon="browser" content="Cookies policy" />
        <Modal.Content>Time left is: {this.state.timer}</Modal.Content>
        <Modal.Actions>
          <Button color="green" onClick={this.props.handleClose} inverted>
            <Icon name="checkmark" /> Got it
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

Я пытаюсь отобразить обратный отсчет времени на модале semantinc ui, но он показывает только начальное значение таймера 5. Пожалуйста, что может быть не так? Я пытаюсь отобразить обратный отсчет на моде semantinc ui, но он показывает только начальное значение таймера 5. Пожалуйста, что может быть не так

1 Ответ

0 голосов
/ 27 августа 2018

Я не уверен, что такое пакет 'timer', однако я бы посоветовал поместить ваш интервал в его собственную переменную внутри CDM, если это не сработает, вам следует попробовать с ванильным setInterval. что-то вроде этого: 

this.timer = setInterval(() => {
  this.setState({
    timer:this.state.timer - 1
  });
}, 1000);

Кроме того, не забудьте в handleClose и componentWillUnmount очистить ваш интервал. 

clearInterval(this.timer);
...