Javascript 单击可启动倒计时计时器，单击第二个按钮可在同一按钮中暂停计时器

我想单击（开始/暂停）按钮，以便在第一次单击和第二次单击时启动计时器并将其暂停。在同一按钮中，启动和暂停计时器应有两个选项

这里是一个描述性图像：

A为开始和暂停倒计时创建了一个单独的按钮，但我想让它们在同一个按钮中

下面是我的代码：

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>
    );
  }
}

从“React”导入React；
导出默认类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
秒：1800000/1000//时间（秒）
};
}
getHours（）{
返回（“0”+数学层（this.state.secondsElapsed/3600））.slice（-2）；
}
getMinutes（）{
返回（“0”+数学层（（this.state.secondsElapsed%3600）/60））.slice(
-2
);
}
getSeconds（）{
返回（“0”+（this.state.secondsElapsed%60））.slice（-2）；
}
开始时间（）{
var_this=这个；
this.countdown=setInterval（函数（）{
_this.setState（{secondsElapsed:_this.state.secondsElapsed-1}）；
}, 1000);
}
重置时间（）{
this.reset=this.setState({
secondsElapsed:（this.state.secondsElapsed=0）
});
}
暂停时间（）{
clearInterval（此为倒计时）；
}
render（）{
返回(
{this.getHours（）}
：{this.getMinutes（）}
：{this.getSeconds（）}
this.startTime（）}>Start
this.pauseTime（）}>Pause
此参数为.resetTime（）}>Reset
);
}
}

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

您可以添加一个额外的状态变量

isActive

，用于跟踪计时器是否处于活动状态，并根据该变量在单击按钮时选择要调用的函数

示例

类计时器扩展React.Component{
状态={
I：错，
秒：1800000/1000//时间（秒）
};
getHours（）{
返回（“0”+数学层（this.state.secondsElapsed/3600））.slice（-2）；
}
getMinutes（）{
返回（“0”+数学层（（this.state.secondsElapsed%3600）/60））.slice(
-2
);
}
getSeconds（）{
返回（“0”+（this.state.secondsElapsed%60））.slice（-2）；
}
开始时间=（）=>{
this.setState（{isActive:true}）；
this.countdown=setInterval（（）=>{
this.setState（（{secondsElapsed}）=>({
secondsElapsed:secondsElapsed-1
}));
}, 1000);
};
重置时间=（）=>{
clearInterval（此为倒计时）；
这是我的国家({
第二批：1800000/1000，
isActive:错误
});
};
暂停时间=（）=>{
clearInterval（此为倒计时）；
this.setState（{isActive:false}）；
};
render（）{
返回(
{this.getHours（）}
：{this.getMinutes（）}
：{this.getSeconds（）}
启动/暂停
重置
);
}
}
render（，document.getElementById（“根”））

{this.state.isActive？this.pauseTime:this.startTime}。作为初学者，你能简单地解释一下我的想法吗words@hichembelfekih当然它被称为，例如，
条件？someExpression:someOtherExpression
将计算为
someExpression
如果
条件
是真实的，则计算为
someOtherExpression
如果它不是真实的，则计算为
someOtherExpression
。非常感谢我的朋友。是的，它确实工作得很好：）