Javascript 当我按下空格键停止秒表时，它会在0重新启动并开始加速

这是我的节目。我创建了一个带有启动和停止按钮的秒表，一切正常。我的下一步是通过空格键让秒表对键盘做出反应。当我按下开始按钮时，秒表开始运行。当我按下空格键时，秒表不是停在当前位置，而是在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;

从“React”导入React；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={millissecondselapsed:0}；
this.handleStopClick=this.handleStopClick.bind（this）；
this.keyPress=this.keyPress.bind（this）；
}
按键=（e）=>{
如果（e.keyCode==32）{
handleStopClick（）；
}
}
getms（）{
返回（“0”+此.state.millissecondselapsed.slice（-2）；
}
//var number=this.state.millissecondselapsed.toString（）.length；
getSeconds（）{
var milli=this.state.millissecondselapsed；
var秒=0；
秒=毫/100；
var myTrunc=Math.trunc（秒）；
myTrunc=myTrunc%60；
返回（“0”+myTrunc）.slice（-2）；
}
getMinutes（）{
var milli=this.state.millissecondselapsed；
var秒=0；
var分钟=0；
秒=毫/100；
分=秒/60；
var myTrunc=Math.trunc（分钟）；
返回（“0”+myTrunc）.slice（-2）；
}
handleStartClick=（）=>{
这是我的国家({
毫秒已关闭：（0）
});
this.timer=setInterval（（）=>{
这是我的国家({
毫秒selapsed:（this.state.millissecondselapsed+1）
});
}, 10)
}
handleStopClick=（）=>{
clearInterval（这个计时器）；
}
render（）{
返回(
{this.getMinutes（）}:{this.getSeconds（）}.{this.getMillenses（）}
开始
停止
);
}
}
导出默认主页；

---

有人知道是什么原因导致了这一切吗？

我想你无法确定。请检查一下这个

我想你不能确定时间间隔。请检查此项

您将

keyPress

回调连接到输入的

onKeydown

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

当计时器启动时禁用启动按钮有助于不启动新的间隔

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

{" "}
开始{'}

---

您将

按键

回调连接到输入的

onKeydown

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

当计时器启动时禁用启动按钮有助于不启动新的间隔

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

{" "}
开始{'}

---

它说问题被封锁编辑说问题被封锁感谢对问题的描述。这是有道理的。我尝试了您的解决方案并禁用了“开始”按钮，但它对按空格键没有反应。@AustinStory按空格键仅在您单击或标记输入以获得焦点时才执行您希望的操作。禁用“开始”按钮仅可在秒表启动后设置多个间隔。如果需要，您可以向输入添加一个ref，并在

handleStartClick

回调中手动设置焦点。另一种方法是将按键侦听器附加到窗口/文档。至于你的问题，“有人知道这是什么原因吗？”，我回答得够充分了吗？是的！我会按照你的想法去做。谢谢@奥斯汀托里太棒了！请将答案标记为已接受，如果您也认为它有帮助，请向上投票。干杯。谢谢你描述这个问题。这是有道理的。我尝试了您的解决方案并禁用了“开始”按钮，但它对按空格键没有反应。@AustinStory按空格键仅在您单击或标记输入以获得焦点时才执行您希望的操作。禁用“开始”按钮仅可在秒表启动后设置多个间隔。如果需要，您可以向输入添加一个ref，并在

handleStartClick

回调中手动设置焦点。另一种方法是将按键侦听器附加到窗口/文档。至于你的问题，“有人知道这是什么原因吗？”，我回答得够充分了吗？是的！我会按照你的想法去做。谢谢@奥斯汀托里太棒了！请将答案标记为已接受，如果您也认为它有帮助，请向上投票。干杯