我想在 React JS 中创建一个带有“开始”、“暂停”和“重置”按钮的倒计时计时器，以便操纵计时器。作为 React 和 JS 的初学者开发人员，我创建了一个状态变量“secondsElapsed”，以便输入计时器的时间（以秒为单位）。

“startTime”函数是在每一秒开始定时器的倒计时。“resetTime”函数是将“secondsElapsed”重置为0。“pauseTime”函数是暂停定时器。

其他功能是计算时间并在特定字段中返回它。

这里是描述图片

单击“开始按钮”后，倒计时功能正常，秒数正在减少。问题是分钟和小时字段并没有像每分钟和每小时那样减少。

这是我的代码和框链接：https ://codesandbox.io/s/y3l1ymq6r1

这是我的 React Js 代码：

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      secondsElapsed: 122 //time in seconds
    };
  }

  getHours() {
    return ("0" + Math.round(this.state.secondsElapsed / 3600)).slice(-2);
  }

  getMinutes() {
    return ("0" + Math.round((this.state.secondsElapsed % 3600) / 60)).slice(
      -2
    );
  }

  getSeconds() {
    return ("0" + (this.state.secondsElapsed % 60)).slice(-2);
  }

  startTime() {
    var _this = this;
    this.countdown = setInterval(function() {
      _this.setState({ secondsElapsed: _this.state.secondsElapsed - 1 });
    }, 1000);
  }

  resetTime() {
    this.reset = this.setState({
      secondsElapsed: (this.state.secondsElapsed = 0)
    });
  }

  pauseTime() {
    clearInterval(this.countdown);
  }

  render() {
    return (
      <div className="App">
        <h1>
          {this.getHours()}:{this.getMinutes()}:{this.getSeconds()}
        </h1>
        <button onClick={() => this.startTime()}>Start</button>
        <button onClick={() => this.pauseTime()}>Pause</button>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}