创建倒数计时器

Question

我想在React Js中创建一个倒数计时器，如图所示，我将在其中使用Start（开始倒数），Stop（停止倒数）和重置（重置计时器）。{{3 }}

作为我在React JS和javascript中的新手开发人员，我首先测试了按钮。此后，我创建了一个“ secondPass”函数来计算剩余时间，然后显示剩余时间。“ countDown”变量用于停止然后是“ setinterval”和“ clearInterval（countDown）”。

问题在于，如图所示，我在“ codesandbox”平台中收到一个错误消息。如果有人可以解释我的错误，并且要求不高，请帮助我编写一个非常简单的代码来实现我的项目。

：

这是React代码：

import React from "react";

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

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  function secondPass() {

  var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

  var remSeconds = seconds % 60;   // To Determine The Seconds

}

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

Answer 1

删除function函数的secondPass关键字。如果要在类中声明函数，则不需要function的function关键字。

使其像

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

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  secondPass() {

    var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

    var remSeconds = seconds % 60;   // To Determine The Seconds

  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

Answer 2

这是因为secondPass是在Timer类的主体中定义的成员函数。在JS中，您不需要function，而是像渲染一样声明它：将function secondPass更改为secondPass

Answer 3

在用于secondPass函数的类中声明函数时，无需使用function关键字。这是新的ES6语法。