javascript/react键下vs onClick

我的javascript计算器上发生了一个奇怪的交互。就我所知，我的keydown事件和onClick应该做同样的事情。然而，结果是不同的

计算器的实时版本如下：

如果单击“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”，此为.handleKeyPress）
{buttonObjects.map（（key，idx）=>(
this.handleInput（key.value，key.type）}>{key.value}
))}

addEventListener

在

render

中被调用，因此每次组件重新render时，按下一个键时，

handleKeyPress

将运行额外的时间。要解决此问题，请将此调用移动到

componentDidMount

addEventListener

中，以便在

render

中调用它，因此每次组件重新加载时，按住一个键时，

handleKeyPress

将额外运行一段时间。若要解决此问题，请将此调用移动到

componentDidMount

我将事件侦听器移动到componentDidMount，但仍然收到相同的问题您是否也将其从

渲染

中删除？我将事件侦听器移动到componentDidMount，但仍然收到相同的问题您是否也将其从

渲染

中删除？

  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>
      ))}