Hören Sie Dokument in reactjs

Question

ich die aktive reagieren Bootstrap popover auf escape drücken .Hier schließen binden wollen Tastendruck ist der 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); 
    }, 

Aber nichts ist in der Konsole angemeldet wurden, wenn ich eine Taste drücken. Ich habe auch versucht, dass am Fenster zu hören und mit verschiedenen Fällen .'keypress', ‚keyup‘ usw., aber es scheint ich etwas falsch mache.

Answer 1

sollten Sie keydown verwenden und nicht keypress.

Keypress ist in der Regel nur für Schlüssel verwendet, die eine Zeichenausgabe gemäß der Dokumentation produzieren

Keypress

Das keypress Ereignis ausgelöst wird, wenn eine Taste gedrückt wird und dass Schlüssel normalerweise erzeugt ein Zeichenwert

Keydown

Das keydown Ereignis ausgelöst wird, wenn eine Taste gedrückt wird.

Answer 2

Gerade hatte ein ähnliches Problem mit diesem selbst. Ich werde Ihren Code verwenden, um eine Fehlerbehebung zu veranschaulichen.

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

Es gibt eine Arbeits jsfiddle ist, reagieren die createClass Verfahren zur Verwendung von Komponentenerstellung here.