问React:倒计时计时器，如何每秒减少一个状态值？
EN

Stack Overflow用户

提问于 2020-09-23 02:45:40

回答 1查看 1K关注 0票数 1

在React倒计时计时器中，状态中有一个称为timeLeft的值，应该每秒递减一次。在代码中有一个名为countDown()的函数试图实现这一点，然而，它会导致一个错误：TypeError: this.setState is not a function.任何帮助都会非常感谢。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';

/*
* A simple React component
*/
const initState = {
  breakLength: 5,
  sessionLength: 25,
  init: 'session',
  timeLeft: 25
}

class Clock extends React.Component {

  constructor(props) {
    super(props);
    this.state = initState;
    this.breakDecrement = this.breakDecrement.bind(this);
    this.breakIncrement = this.breakIncrement.bind(this);
    this.sessionDecrement = this.sessionDecrement.bind(this);
    this.sessionIncrement = this.sessionIncrement.bind(this);
    this.startStop = this.startStop.bind(this);
    this.reset = this.reset.bind(this);
  }

  breakDecrement() {
    let breakLength = this.state.breakLength - 1;
    this.setState({ breakLength: breakLength });
  }
  breakIncrement() {
    let breakLength = this.state.breakLength + 1;
    this.setState({ breakLength: breakLength });
  }
  sessionDecrement() {
    let sessionLength = this.state.sessionLength - 1;
    this.setState({ sessionLength: sessionLength });
  }
  sessionIncrement() {
    let sessionLength = this.state.sessionLength + 1;
    this.setState({ sessionLength: sessionLength });
  }

  startStop() {
    this.countDown();
  }

  reset() {
    this.setState({ breakLength: 5 });
    this.setState({ sessionLength: 25 });
    this.setState({ init: 'session' });
    this.setState({ timeLeft: 25 });
  }

  countDown(){
    setInterval(down, 1000);
    let minus = this.state.timeLeft - 1;
    function down(minus)
    {
      this.setState({ timeLeft: minus });
    }
  }


  render() {
    return (
      <div id="clock">
      <h1 id="title">25-5 Clock</h1>

      <div>
      <p id="break-label">Break Length</p>
      <p id="break-length">{this.state.breakLength}</p>
      <button id="break-decrement" onClick={e => this.breakDecrement()}> Decrease </button>
      <button id="break-increment" onClick={e => this.breakIncrement()}> Increase </button>
      </div>

      <div>
      <p id="session-label">Session Length</p>
      <p id="session-length">{this.state.sessionLength}</p>
      <button id="session-decrement" onClick={e => this.sessionDecrement()}> Decrease </button>
      <button id="session-increment" onClick={e => this.sessionIncrement()}> Increase </button>
      </div>

      <hr/>

      <div>
      <p id="timer-label">{this.state.init}</p>
      <p id="time-left">{this.state.timeLeft}</p>
      <button id="start_stop" onClick={e => this.startStop()}> start/stop </button>
      <button id="reset" onClick={e => this.reset()}> reset </button>
      </div>

      </div>
    );
  }
};

/*
* Render the above component into the div#app
*/
ReactDOM.render(<Clock />, document.getElementById("app"));

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>25-5 Clock</title>
  <style>
  </style>
</head>
<body>
  <main>
    <div id="app"></app>
    </main>
  </body>
  </html>

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-23 02:59:13

函数'down‘的文字上下文不是绑定this。您应该使用箭头函数调用：

 countDown(){
    const down = (minus) =>
    {
        this.setState({ timeLeft: minus });
    }

    setInterval(() => down(this.state.timeLeft - 1), 1000);
 }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64015934

复制

相似问题

问React:倒计时计时器，如何每秒减少一个状态值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:倒计时计时器，如何每秒减少一个状态值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:倒计时计时器，如何每秒减少一个状态值？
EN