reactjs

Question

मैं बंद करने के लिए सक्रिय पर escape प्रेस .Here बूटस्ट्रैप पॉपओवर प्रतिक्रिया के लिए बाध्य करना चाहते हैं में दस्तावेज़ के लिए कुंजी प्रेस करने के लिए सुनो कोड

_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 'आदि लेकिन ऐसा लगता है कि मैं कुछ गलत कर रहा हूं।

Answer 1

आपको keydown का उपयोग करना चाहिए और keypress नहीं होना चाहिए।

कीप्रेस आमतौर पर केवल चाबियाँ कि डॉक्स

Keypress

जब एक चाबी नीचे दबाया जाता है और उस कुंजी सामान्य रूप से एक चरित्र मूल्य पैदा करता है कुंजी दबाने घटना निकाल दिया जाता है के अनुसार एक चरित्र उत्पादन का उत्पादन के लिए प्रयोग किया जाता है

Keydown

कुंजी दबाए जाने पर कीडाउन ईवेंट निकाल दिया जाता है।

Answer 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(){ 
    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)); 
}, 

एक काम jsfiddle है, की createClass पद्धति का उपयोग करके यह बहुत आसान के सभी बनाने के लिए घटक निर्माण here.