javascript / react keydown vs onClick

Question

我的JavaScript计算器上发生了奇怪的交互。据我所知，我的keydown事件和onClick应该在做同样的事情。但是结果是不同的。

计算器的实时版本在这里：https://aaronrbetts.github.io/Calculator/

如果我单击：'7+'，则输出显示7 +。

如果我使用numPad并输入'7+'，我将得到'14 +'。

  handleKeyPress(e) {
// Check if key pressed is in calc buttons array
var result = buttonObjects.find(obj => {
  return obj.keyCode === e.keyCode
});

if(result) {
  // handle input if key pressed is on calculator
  this.handleInput(result.value, result.type);
}

}

  render() {
document.addEventListener("keydown", this.handleKeyPress)

      {buttonObjects.map((key, idx) => (
        <button key={idx} id={key.id} onClick={() => this.handleInput(key.value, key.type)}>{key.value}</button>
      ))}

Answer 1

addEventListener在render中被调用，因此，每次重新释放组件时，按住某个键时，handleKeyPress将再运行一次。要解决此问题，请将此调用移到componentDidMount。