我正在尝试为我的 React Js 计算器应用程序创建一个按键监听器,当我添加事件监听器时,它会检测到我按下的次数越多。有没有更好的地方放置事件监听器?当我按下 1234 时,我得到 p>
122333344444444
/****************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);
最佳答案
从 render()
中删除 document.addEventListener
监听器。
只要组件需要重新渲染(state
/props
的更改),就会调用该方法,这会附加另一个事件监听器。
建议将document.addEventListener
移动到componentDidMount()
- 只执行一次,并通过document.removeEventListener<移除它
在 componentWillUnmount
上防止内存泄漏。
关于javascript - React document.addEventListener 正在检测多个按键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52151843/