当我按空格键停止秒表时，它从 0 重新开始并开始加速

Question

这是我的程序。我用开始和停止按钮创建了秒表，一切正常。我的下一步是让秒表通过空格键对键盘做出反应。当我按下开始按钮时，秒表开始运行。当我按下空格键时，秒表并没有停在当前位置，而是从 0 处重新开始并开始快速计数。停止按钮正常工作。import React from 'react';class Home extends React.Component {    constructor(props) {        super(props);        this.state = {milliSecondsElapsed: 0};        this.handleStopClick = this.handleStopClick.bind(this);        this.keyPress = this.keyPress.bind(this);            }    keyPress = (e) => {        if (e.keyCode == 32){            handleStopClick();        }    }    getMilliseconds() {        return ("0" + this.state.milliSecondsElapsed).slice(-2);    }    // var number = this.state.milliSecondsElapsed.toString().length;    getSeconds() {        var milli = this.state.milliSecondsElapsed;        var seconds = 0;        seconds = milli / 100;        var myTrunc = Math.trunc(seconds);        myTrunc = myTrunc % 60;        return ("0" + myTrunc).slice(-2);    }    getMinutes() {        var milli = this.state.milliSecondsElapsed;        var seconds = 0;        var minutes = 0;        seconds = milli / 100;        minutes = seconds / 60;        var myTrunc = Math.trunc(minutes);        return ("0" + myTrunc).slice(-2);            }    handleStartClick = () => {        this.setState({            milliSecondsElapsed: (0)        });        this.timer = setInterval(() => {            this.setState({                milliSecondsElapsed: (this.state.milliSecondsElapsed + 1)            });        }, 10)    }    handleStopClick = () => {        clearInterval(this.timer);    }有谁看到可能导致这种情况的原因？

Answer 1

您将keyPress回调附加到onKeydown输入，但是当您单击开始按钮以启动秒表时，该按钮仍然具有焦点。击中空间只是再次开始，这就是它“重置”计时器并开始变得更快的原因，你没有清除以前的间隔，所以它们继续运行。如果您将焦点转移到输入然后点击空格，它会按预期工作。

在计时器开始时禁用开始按钮有助于不开始新的间隔。

<button

  disabled={this.state.milliSecondsElapsed}

  type="button"

  onClick={this.handleStartClick}

>

  {" "}

  start{" "}

</button>

Answer 2

我认为你不能明确间隔。请检查这个问题