Question

我想单击（开始/暂停）按钮以便在第一次单击和第二次单击中开始计时以暂停它。应该在同一按钮中使用两个选项来启动和暂停计时器。

以下是描述性图片：

A为开始和暂停倒数创建了一个单独的按钮，但我想将它们设置在同一按钮中。

这是我的React Js代码：

import React from "react";

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

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

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

  getMinutes() {
    return ("0" + Math.floor((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">
        <div className="timer-container">
          <div className="bloc-timer"> {this.getHours()}</div>
          <div className="bloc-timer"> :{this.getMinutes()}</div>
          <div className="bloc-timer"> :{this.getSeconds()}</div>
        </div>
        <div>
          <button onClick={() => this.startTime()}>Start</button>
          <button onClick={() => this.pauseTime()}>Pause</button>
          <button onClick={() => this.resetTime()}>Reset</button>
        </div>
      </div>
    );
  }
}

Answer 1

您可以添加一个额外的状态变量isActive来跟踪计时器是否处于活动状态，并选择基于该计时器的按钮时要调用的函数。

示例

class Timer extends React.Component {
  state = {
    isActive: false,
    secondsElapsed: 1800000 / 1000 //time in seconds
  };

  getHours() {
    return ("0" + Math.floor(this.state.secondsElapsed / 3600)).slice(-2);
  }

  getMinutes() {
    return ("0" + Math.floor((this.state.secondsElapsed % 3600) / 60)).slice(
      -2
    );
  }

  getSeconds() {
    return ("0" + (this.state.secondsElapsed % 60)).slice(-2);
  }

  startTime = () => {
    this.setState({ isActive: true });
    
    this.countdown = setInterval(() => {
      this.setState(({ secondsElapsed }) => ({
        secondsElapsed: secondsElapsed - 1
      }));
    }, 1000);
  };

  resetTime = () => {
    clearInterval(this.countdown);
    this.setState({
      secondsElapsed: 1800000 / 1000,
      isActive: false
    });
  };

  pauseTime = () => {
    clearInterval(this.countdown);
    this.setState({ isActive: false });
  };

  render() {
    return (
      <div className="App">
        <div className="timer-container">
          <span className="bloc-timer"> {this.getHours()}</span>
          <span className="bloc-timer"> :{this.getMinutes()}</span>
          <span className="bloc-timer"> :{this.getSeconds()}</span>
        </div>
        <div>
          <button
            onClick={this.state.isActive ? this.pauseTime : this.startTime}
          >
            Start/Pause
          </button>
          <button onClick={this.resetTime}>Reset</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Timer />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您可以添加一个布尔值以检查计时器的状态。并触发计时器根据其值启动或停止。基本上添加另一个函数来更改状态，如果尚未启动，则调用startTime，如果已启动，则调用pauseTime。

单击以启动倒数计时器，再单击一次以在同一按钮中暂停计时器

2 个答案: