पर केडडाउन घटना प्रतिक्रिया

Question

में divs पर काम नहीं कर रही है मैं प्रतिक्रिया में एक div पर एक keyDown घटना का उपयोग करना चाहता हूँ। मैं करता हूं:

componentWillMount() { 
     document.addEventListener("keydown", this.onKeyPressed.bind(this)); 
    } 

    componentWillUnmount() { 
     document.removeEventListener("keydown", this.onKeyPressed.bind(this)); 
    }  

    onKeyPressed(e) { 
    console.log(e.keyCode); 
    } 

    render() { 
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; 
    return (
     <div 
     className="player" 
     style={{ position: "absolute" }} 
     onKeyDown={this.onKeyPressed} // not working 
     > 
     <div className="light-circle"> 
      <div className="image-wrapper"> 
      <img src={IMG_URL+player.img} /> 
      </div> 
     </div> 
     </div> 
    ) 
    } 

यह ठीक काम करता है, लेकिन मैं इसे प्रतिक्रिया शैली में और अधिक करना चाहता हूं। मैंने

 onKeyDown={this.onKeyPressed} 

घटक पर कोशिश की। लेकिन यह प्रतिक्रिया नहीं करता है। यह मुझे याद करते हुए इनपुट तत्वों पर काम करता है।

Codepen: http://codepen.io/lafisrap/pen/OmyBYG

मैं इसे कैसे कर सकता है?

Answer 1

आप का उपयोग करना चाहिए tabindex विशेषता प्रतिक्रिया में एक div पर घटना OnKeyDown सुनने के लिए सक्षम होने के लिए। टैबइंडेक्स = "0" को सेट करना आपके हैंडलर को आग लगाना चाहिए।

Answer 2

आप इसे इस तरह

<div 
    className="player" 
    style={{ position: "absolute" }} 
    onKeyDown={this.onKeyPressed} 
    tabIndex="0" 
    > 

तो onKeyPressedthis करने के लिए बाध्य नहीं है लिखने के लिए है, तो तीर समारोह का उपयोग कर इसे फिर से लिखने या घटक constructor में यह बाध्य करने की कोशिश की जरूरत है।

Answer 3

आप शुद्ध जावास्क्रिप्ट में बहुत ज्यादा सोच रहे हैं। उन प्रतिक्रिया जीवनशैली विधियों पर अपने श्रोताओं से छुटकारा पाएं और event.keyCode के बजाय उपयोग करें (क्योंकि यह जेएस इवेंट ऑब्जेक्ट नहीं है, यह एक प्रतिक्रिया SyntheticEvent है)। आपका पूरा घटक इस तरह के रूप में सरल हो सकता है (मान लीजिए कि आपने अपने तरीकों को कन्स्ट्रक्टर में बाध्य नहीं किया है)।

onKeyPressed(e) { 
    console.log(e.key); 
} 

render() { 
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; 
    return (
    <div 
     className="player" 
     style={{ position: "absolute" }} 
     onKeyDown={(e) => this.onKeyPressed(e)} 
    > 
     <div className="light-circle"> 
     <div className="image-wrapper"> 
      <img src={IMG_URL+player.img} /> 
     </div> 
     </div> 
    </div> 
) 
}