onKeyDown 이벤트가 div에서 작동하지 않습니다.

Question

React의 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

당신은 반작용의 사업부에 이벤트를 onKeyDown에들을 수 있도록 tabIndex를 속성을 사용해야합니다. tabIndex = "0"으로 설정하면 처리기가 실행됩니다.

Answer 2

는 그런 다음, 이런 식 onKeyPressed이 this에 바인딩되지 않은 경우

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

쓰기 화살표 기능을 사용하여 다시 작성하거나 구성 요소 constructor에 바인딩을 시도 할 필요가있다.

Answer 3

당신은 너무 순수한 자바 스크립트로 생각하고 있습니다. 이러한 라이프 사이클 메소드에서 청취자를 없애고 event.keyCode 대신 event.key을 사용하십시오 (JS 이벤트 객체가 아니기 때문에 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> 
) 
}