zoukankan      html  css  js  c++  java
  • React 实现键盘监听事件

    1、在需要进行监听的Dom上添加 onKeyDown 方法:

     <Button
         className='btn-add'
         type="primary"
         icon="search"
         onKeyDown={(e)=>this.handleKeyDown(e)}
         onClick={()=>this.handleSearch()}>
         {LangMapping.Search}
     </Button>

    2、定义 handleKeyDown 方法及事件处理:

    //keyCode 38=up arrow  40=down arrow   13=Enter
    handleKeyDown = (e) => {
        if (e.keyCode === 13) {
            console.log("按下了Enter键")
            this.handleSearch();
        }
    }

    3、在 componentDidMount 钩子中定义键盘监听事件:

    componentDidMount() {
        document.addEventListener('keydown',this.handleKeyDown);
    }

    4、在 componentWillUnmount 钩子中移除键盘监听事件:

    componentWillUnmount() {
        document.removeEventListener('keydown',this.handleKeyDown);
    }

    5、参考:

    https://www.cnblogs.com/iverson-tian/p/13640450.html

  • 相关阅读:
    hdu1824-Let's go home:图论2-SAT
    acdream:Andrew Stankevich Contest 3:Two Cylinders:数值积分
    POJ 2516 Minimum Cost (KM最优匹配)
    LightOJ
    LightOJ
    HDU
    LightOJ
    LightOJ
    CodeForces
    CodeForces
  • 原文地址:https://www.cnblogs.com/art-poet/p/13996261.html
Copyright © 2011-2022 走看看