web-dev-qa-db-fra.com

Écouter le document dans les réactions au clavier

Je veux me lier pour fermer le popover de réaction actif sur escape appuyez sur. Voici le code

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

Mais rien ne devient connecté à la console lorsque j'appuie sur une touche. J'ai essayé d'écouter cela sur la fenêtre également et avec différents cas.'Keypress ',' keyup 'etc.

reactjsreact-jsxreact-bootstrap
49
alwaysLearn

Vous devez utiliser keydown et non keypress.

Keypress est généralement utilisé uniquement pour les clés qui produisent une sortie de caractères conformément à la documentation.

Appuyez sur la touche

L'événement de frappe est déclenché lorsqu'une touche est enfoncée et cette touche produit normalement une valeur de caractère

Touche Bas

L'événement keydown est déclenché lorsqu'une touche est enfoncée.

39
Dhiraj

Je viens d'avoir un problème similaire avec cela moi-même. Je vais utiliser votre code pour illustrer un correctif. 

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

Comme vous utilisez la méthode createClass, vous n'avez pas besoin de vous lier à certaines méthodes, car this est implicite dans chaque méthode définie. 

Il y a un jsfiddle qui fonctionne, utilisant la méthode createClass de création de composant React ici.

32
Chris Sullivan

J'avais les mêmes exigences pour une div que l'on pouvait tabuler.

Le code suivant pour moi était à l'intérieur d'un appel à items.map ((item) => ...

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

Cela a fonctionné pour moi!

0
Jt oso