代码之家  ›  专栏  ›  技术社区  ›  enavuio

反应文档.addEventListener正在检测多个按键

  •  1
  • enavuio  · 技术社区  · 6 年前

    我正在尝试为我的React Js计算器应用程序创建一个按键侦听器,当我在中添加事件侦听器时,它会检测到更多的按键。有没有更好的地方放置事件侦听器?当我按1234时,我得到

     /****************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);
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Lyubomir    6 年前

    删除 document.addEventListener 侦听器来自 render()

    state / props )它附加了另一个事件侦听器。

    建议: 文档.addEventListener componentDidMount() document.removeEventListener componentWillUnmount 以防止内存泄漏。