当我按空格键停止秒表时，它从 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);
    }

    render() {
        return (
            <div>
                <h1>{this.getMinutes()}:{this.getSeconds()}.{this.getMilliseconds()}</h1>
                <button type="button" onClick={this.handleStartClick}> start </button>
                <button type="button" onClick={this.handleStopClick}> stop </button>
                <input value={this.state.milliSecondsElapsed} onKeyDown={this.keyPress} onChange={this.handleStopClick}/>
            </div>
        );
    }

}

export default Home;

有人知道是什么原因造成的吗？

Answer 1

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

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

<button
  disabled={this.state.milliSecondsElapsed}
  type="button"
  onClick={this.handleStartClick}
>
  {" "}
  start{" "}
</button>

Answer 2

我认为你不能明确间隔。请检查此question