输入后倒计时自动复位

Question

我在我的项目中使用了 Countdown 和 ReactCodeInput 并且它有效。但是当我将它与简单的输入结合起来时，只要我的输入发生变化，它就会重新启动。我只想重新启动它，并且只有在时间结束时才重新启动它。这是我的代码：import React, { Component } from "react";import Countdown from "react-countdown-now";import ReactCodeInput from "react-code-input";const lengthToken = 6;class Test extends Component {  constructor(props) {    super(props);    this.state = {      token: "",      secondsToExpire: 600000    };  }  saveTokenToState = token => {    this.setState({ token });  };  render() {    const renderer = ({ minutes, seconds }) => (      <span>        {minutes}:{seconds}      </span>    );    return (      <div>        <label htmlFor="token">          <ReactCodeInput            inputmode="numeric"            pattern="[0-9]*"            type="number"            name="test"            fields={lengthToken}            value={this.state.token}            onChange={this.saveTokenToState}            inputStyle={codeStyle}          />        </label>        <Countdown          renderer={renderer}          date={Date.now() + this.state.secondsToExpire}        />      </div>    );  }}

Answer 1

您在 onChange 处理程序中使用 setState，这将导致重新渲染。这就是您的倒计时重置的原因。我想处理这个问题的一种方法是将 Countdown 放在一个单独的类中并扩展 React.PureComponent 让它为你处理更新。或者，在该类中编写您自己的shouldComponentUpdate()，尽管不建议这样做。

Answer 2

应用此更改：

import ReactDOM from "react-dom";

import React, { Component } from "react";

import Countdown from "react-countdown-now";

import ReactCodeInput from "react-code-input";

const lengthToken = 6;

class Test extends Component {

  countdownDate;

  constructor(props) {

    super(props);

    this.state = {

      token: "",

      secondsToExpire: 600000

    };

    this.countdownDate = Date.now() + this.state.secondsToExpire;

  }

  saveTokenToState = token => {

    this.setState({ token });

  };

  render() {

    const renderer = ({ minutes, seconds }) => (

      <span>

        {minutes}:{seconds}

      </span>

    );

    return (

      <div>

        <label htmlFor="token">

          <ReactCodeInput

            inputmode="numeric"

            pattern="[0-9]*"

            type="number"

            name="test"

            fields={lengthToken}

            value={this.state.token}

            onChange={this.saveTokenToState}

          />

        </label>

        <Countdown renderer={renderer} date={this.countdownDate} />

      </div>

    );

  }

}

Answer 3

如果存储在到期日，而不是延迟在组件的状态，重新渲染您的组件将不会触发重新计算Date.now() + secondsToExpire的Countdown孩子：

constructor(props) {

    super(props);

    let date = Date.now() + delay;

    this.state = {

        token: "",

        expirationDate: date

    };

}

...

return <div>

    ...

    <Countdown date={this.state.expirationDate} ...>

</div>