Javascript React document.addEventListener正在检测多个按键

我正在尝试为我的React Js calculator应用程序创建一个按键监听器，当我在中添加事件监听器时，它会检测到我按下的次数越多。是否有更好的地方放置事件侦听器？当我按1234时，我得到

12233334444

/*************按钮组件*************/
类CalcApp扩展了React.Component{
状态={
值：null，
DisplayNumber:“0”，
所选号码：[]，
计算：错，
操作员：空
};
selectMath=（selectedMath）=>{
const{displayNumbers，operator，value}=this.state；
const nextValue=parseFloat（显示数字）
console.log（selectedMath）；
/**做数学和其他方法*/
render（）{
document.addEventListener（'keydown'，（事件）=>{
const keyName=event.key；
if（/^\d+$/.test（keyName））{
此.selectButton（键名）
console.log（keyName）；
}
});
返回(
);
}
}
让domContainer=document.querySelector（'#app'）；
render（，domContainer）；

从

render（）

中删除

document.addEventListener

侦听器。 只要组件需要重新呈现（更改

状态

/

道具

），并附加另一个事件侦听器，就会调用该方法

---

建议：移动

文档。将EventListener

添加到

componentDidMount（）

-仅执行一次，并通过

文档将其删除。组件上的removeEventListener

将卸载以防止内存泄漏。

非常感谢！！学习react并非常喜欢它！

 /****************Button Component*************/
class CalcApp extends React.Component {

state = {
  value: null,
  displayNumbers: '0',
  selectedNumbers: [],
  calculating: false,
  operator:null
 };



selectMath = (selectedMath) =>{
const {displayNumbers, operator,value} = this.state;
const nextValue = parseFloat(displayNumbers)
console.log(selectedMath);

 /**do math and other methods*/

render() {
document.addEventListener('keydown', (event) => {
    const keyName = event.key;
  if(/^\d+$/.test(keyName)){
    this.selectButton(keyName)
    console.log(keyName);
    }
  });
return (
    <div>
        <Display displayNumbers={this.state.displayNumbers}
        selectedNumbers={this.state.selectedNumbers}/>
        <Button selectedNumbers={this.state.selectedNumbers}
                selectButton ={this.selectButton}
                selectC = {this.selectC}
                displayNumbers={this.state.displayNumbers}
                selectDot = {this.selectDot}
                selectMath = {this.selectMath}/>
    </div>
);
}
}

let domContainer = document.querySelector('#app');
ReactDOM.render(<CalcApp />, domContainer);