ReactJs - Обратный отсчет неожиданно сброшен - PullRequest
Новая
       15

ReactJs - Обратный отсчет неожиданно сброшен

0 голосов
/ 09 июня 2019

Я использовал Countdown в своем проекте, и он работает как шарм.но когда я объединил его с простым вводом, он будет перезапускаться всякий раз, когда мой ввод изменится.Я хочу перезапустить его только и только если время истекло.Вот мой код: 

import React from 'react';
import { Input } from 'reactstrap';
import Countdown from 'react-countdown-now';
import { connect } from 'react-redux';

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '',
      disabled: false,
    };
    this.update = this.update.bind(this);
  }

  update(e) {
    this.setState({ code: e.target.value });
  }

  render() {
    return (
      <div>
        <Input
          className="text-center activationCode__letter-spacing"
          maxLength="4"
          type="text"
          pattern="\d*"
          id="activationCode__input-fourth"
          bsSize="lg"
          value={this.state.code}
          onChange={this.update}
        />{' '}
        <Countdown date={Date.now() + 120000} renderer={renderer} />
      </div>
    );
  }
}

const renderer = ({ minutes, seconds, completed }) => {
  if (completed) {
    return <p>reset</p>;
  }
  return (
    <p>
      {minutes}:{seconds}
    </p>
  );
};

const mapStateToProps = state => ({
  user: state.auth,
});

export default connect(
  mapStateToProps,
  null,
)(Foo);

Есть предложения?

1 Ответ

1 голос
/ 09 июня 2019

Причина, по которой ваш счетчик перезапускается, состоит в том, что при изменении поля ввода вы обновляете свое состояние. Обновление состояния вызовет повторное рендеринг, который в конечном итоге снова выполняет функцию Date.now ().

Решением вашей проблемы было бы перенести дату вашего обратного отсчета в ваш конструктор, чтобы она была установлена ​​только один раз, а затем в вашей функции рендеринга ссылаться на нее через состояние. 

constructor(props) {
super(props);
this.state = {
  code: '',
  disabled: false,
  date: Date.now() + 120000
};
this.update = this.update.bind(this);
}

...

render() {
  return (
    <div>
      <Input
        className="text-center activationCode__letter-spacing"
        maxLength="4"
        type="text"
        pattern="\d*"
        id="activationCode__input-fourth"
        bsSize="lg"
        value={this.state.code}
        onChange={this.update}
      />{' '}
      <Countdown date={this.state.date} renderer={renderer} />
    </div>
  );
}
...