输入后倒计时自动复位

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 {&nbsp; countdownDate;&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; token: "",&nbsp; &nbsp; &nbsp; secondsToExpire: 600000&nbsp; &nbsp; };&nbsp; &nbsp; this.countdownDate = Date.now() + this.state.secondsToExpire;&nbsp; }&nbsp; saveTokenToState = token => {&nbsp; &nbsp; this.setState({ token });&nbsp; };&nbsp; render() {&nbsp; &nbsp; const renderer = ({ minutes, seconds }) => (&nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; {minutes}:{seconds}&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; );&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <label htmlFor="token">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ReactCodeInput&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputmode="numeric"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern="[0-9]*"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="test"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields={lengthToken}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.token}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.saveTokenToState}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; <Countdown renderer={renderer} date={this.countdownDate} />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}

Answer 3

如果存储在到期日，而不是延迟在组件的状态，重新渲染您的组件将不会触发重新计算Date.now() + secondsToExpire的Countdown孩子：constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; let date = Date.now() + delay;&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; token: "",&nbsp; &nbsp; &nbsp; &nbsp; expirationDate: date&nbsp; &nbsp; };}...return <div>&nbsp; &nbsp; ...&nbsp; &nbsp; <Countdown date={this.state.expirationDate} ...></div>