ReactJS Stopwatch使Webapp重新加载

时间:2019-03-18 00:31:01

标签: reactjs

我需要在React Web应用程序中放置一个秒表,该应用程序具有启动,停止和重置按钮。这是我为此编写的代码,但是当我按下webapp中的“开始”按钮时,即使经过隔离(在JSFiddle上测试),该代码也能正常工作,但在几毫秒后webapp就会重新加载。有人知道会导致它重新加载吗?

import React, { Component } from 'react';
import './Stopwatch.css'

const leftPad = (width, n) => {
    if ((n + '').length > width) {
        return n;
    }
    const padding = new Array(width).join('0');
    return (padding + n).slice(-width);
  };

  class Stopwatch extends React.Component {
    constructor(props) {
      super(props);

      ["update", "reset", "toggle"].forEach((method) => {
          this[method] = this[method].bind(this);
      });

      this.state = this.initialState = {
        isRunning: false,
        timeElapsed: 0,
      };
    }
    toggle() {
      this.setState({isRunning: !this.state.isRunning}, () => {
        this.state.isRunning ? this.startTimer() : clearInterval(this.timer)
      });
    }
    reset() {
      clearInterval(this.timer);
      this.setState(this.initialState);
    }
    startTimer() {
      this.startTime = Date.now();
      this.timer = setInterval(this.update, 10);
    }
    update() {
      const delta = Date.now() - this.startTime;
      this.setState({timeElapsed: this.state.timeElapsed + delta});
      this.startTime = Date.now();
    }
    render() {
      const {isRunning, lapTimes, timeElapsed} = this.state;
      return (
              <div>
                <TimeElapsed id="timer" timeElapsed=     {this.state.timeElapsed} />
                <button onClick={this.toggle}>
                  {this.state.isRunning ? 'Stop' : 'Start'}
                </button>
                <button
                  onClick= {this.reset}
                  disabled={this.state.isRunning && this.state.timeElapsed || (this.state.timeElapsed === 0)}
                >
                  Reset
                </button>
              </div>
      );
    }
}

  class TimeElapsed extends React.Component {
    getUnits() {
      const seconds = this.props.timeElapsed / 1000;
      return {
        min: Math.floor(seconds / 60).toString(),
        sec: Math.floor(seconds % 60).toString(),
        msec: (seconds % 1).toFixed(3).substring(2)
      };
    }
    render() {
      const units = this.getUnits();
      return (
        <div id={this.props.id}>
          <span>{leftPad(2, units.min)}:</span>
          <span>{leftPad(2, units.sec)}.</span>
          <span>{units.msec}</span>
        </div>
      );
    }
  }

  export default Stopwatch;

0 个答案:

没有答案