在React.js中听按键文档

猴子猿2020-03-16

我想绑定以在escape按下时关闭活动的反应引导弹出窗口。这是代码

_handleEscKey:function(event){
         console.log(event);
        if(event.keyCode == 27){
          this.state.activePopover.hide();
        }
   },

  componentWillMount:function(){
     BannerDataStore.addChangeListener(this._onchange);
     document.addEventListener("click", this._handleDocumentClick, false);
     document.addEventListener("keyPress", this._handleEscKey, false);
   },


   componentWillUnmount: function() {
     BannerDataStore.removeChangeListener(this._onchange);
      document.removeEventListener("click", this._handleDocumentClick, false);
      document.removeEventListener("keyPress", this._handleEscKey, false);
   },

但是，当我按任意键时，控制台中都不会记录任何内容。我也尝试在窗口上以及不同情况下使用'keypress'，'keyup'等来收听，但似乎我做错了。

Near小胖2020/03/16 12:21:08

对于可制表的div，我有相同的要求。

以下代码对我来说是在对items.map（（item）=> ...

  <div
    tabindex="0"
    onClick={()=> update(item.id)}
    onKeyDown={()=> update(item.id)}
   >
      {renderItem(item)}
  </div>

这对我有用！

MandyNear乐2020/03/16 12:21:08

Jt oso的答案版本与此问题更相关。我认为这比使用外部库或API挂钩绑定/取消绑定侦听器的其他答案要简单得多。

var KEY_ESCAPE = 27;
...
    function handleKeyDown(event) {
        if (event.keyCode === KEY_ESCAPE) {
            /* do your action here */
        }
    }
...
    <div onKeyDown={handleKeyDown}>
...

Itachi小卤蛋凯2020/03/16 12:21:08

我自己也有类似的问题。我将使用您的代码来说明解决方法。

// for other devs who might not know keyCodes
var ESCAPE_KEY = 27;

_handleKeyDown = (event) => {
    switch( event.keyCode ) {
        case ESCAPE_KEY:
            this.state.activePopover.hide();
            break;
        default: 
            break;
    }
},

// componentWillMount deprecated in React 16.3
componentDidMount(){
    BannerDataStore.addChangeListener(this._onchange);
    document.addEventListener("click", this._handleDocumentClick, false);
    document.addEventListener("keydown", this._handleKeyDown);
},


componentWillUnmount() {
    BannerDataStore.removeChangeListener(this._onchange);
    document.removeEventListener("click", this._handleDocumentClick, false);
    document.removeEventListener("keydown", this._handleKeyDown);
},