Ascolta pressione del tasto per il documento in reactjs

Question

voglio legare per chiudere la attiva reagiscono popover bootstrap sulla escape stampa .Qui è il codice

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

Ma nulla è sempre registrato nella console quando si preme un tasto qualsiasi. Ho provato ad ascoltarlo anche su finestre e con casi diversi.'keypress ',' keyup 'etc, ma sembra che stia facendo qualcosa di sbagliato.

Answer 1

È necessario utilizzare keydown e non keypress.

Keypress viene solitamente utilizzato solo per le chiavi che producono un output di caratteri secondo la documentazione

Keypress

KeyPress viene generato quando viene premuto un tasto premuto e la chiave normalmente produce un valore di carattere

Keydown

L'evento keydown viene generato quando si preme un tasto.

Answer 2

Ho avuto un problema simile con me stesso. Userò il tuo codice per illustrare una correzione.

// 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(){ 
    BannerDataStore.addChangeListener(this._onchange); 
    document.addEventListener("click", this._handleDocumentClick, false); 
    document.addEventListener("keydown", this._handleKeyDown.bind(this)); 
}, 


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

C'è un jsfiddle di lavoro, utilizzando il metodo createClass di Reagire creazione componente here.