Прислушайтесь к нажатию на документ в реале

Я хочу привязать, чтобы закрыть активный ответный загрузочный опрос на 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 'и т.д., Но похоже, что я делаю что-то неправильно.

Ответы

Ответ 1

Вы должны использовать keydown, а не keypress.

Keypress обычно используется только для ключей, которые производят вывод символов в соответствии с документами

Keypress

Событие нажатия клавиши запускается, когда клавиша нажата и эта клавиша обычно генерирует значение символа

Keydown

Событие keydown запускается при нажатии клавиши.

Ответ 2

Просто у меня была похожая проблема с этим. Я буду использовать ваш код для иллюстрации исправления.

// 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);
},

Так как вы используете способ создания классов, вам не нужно привязываться к определенным методам, поскольку this подразумевается в каждом определенном методе.

Здесь есть работающий jsfiddle, использующий метод createClass для создания компонента React .

Ответ 3

У меня были те же требования к div, который можно было вкладывать.

Следующий код для меня был внутри вызова items.map((item) =>...

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

Это сработало для меня!