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

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

---

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>
    )
  }

잘 작동하지만 React 스타일로 더 많이하고 싶습니다. 나는 시도했다

        onKeyDown={this.onKeyPressed}

구성 요소에. 하지만 반응하지 않습니다. 내가 기억하는 것처럼 입력 요소에서 작동합니다.

Codepen

어떻게하니?

---

React의 div에서 onKeyDown 이벤트를 수신 하려면 tabIndex 속성을 사용해야합니다 . tabIndex = "0"을 설정하면 핸들러가 실행됩니다.

---

이런 식으로 작성해야합니다

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

에 onKeyPressed바인딩되지 않은 경우 this화살표 기능을 사용하여 다시 작성하거나 구성 요소에 바인딩합니다 constructor.

---

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

참고 URL : https://stackoverflow.com/questions/43503964/onkeydown-event-not-working-on-divs-in-react