当我按空格键停止秒表时，它从 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&nbsp; disabled={this.state.milliSecondsElapsed}&nbsp; type="button"&nbsp; onClick={this.handleStartClick}>&nbsp; {" "}&nbsp; start{" "}</button>

Answer 2

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