ReactJs

Question

我在我的项目中使用了 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);

有什么建议吗？

Answer 1

您的计数器重新启动的原因是，当您更改输入字段时，您正在更新您的状态。更新状态将导致重新渲染，最终再次执行 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>
  );
}

ReactJs - 倒计时意外重置

ReactJs - Countdown reset unexpectedly

countdown