onKeyDown 이벤트에서 작동하지 않 div 에 반응할

을 사용하고 싶 keyDown 이벤트에 사업부에서는 반응합니다. I do:

  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}

에서 구성 요소입니다. 하지만 그't react. 에서 작동하는 입력한 요소로 기억이 나요.

Codepen

어떻게 할 수 있습니다?

Rich Warrior
편집된 질문20일 8월 2019 в 4:57
프로그래밍
events reactjs keypress keydown
19일 4월 2017 в 6:57
아직 보기가 없습니다.
질문에 대한 의견 (1)
해결책

당신이 사용해야 한다포커스를 받특성을 들을 수 onKeyDown 이벤트에 사업부에서는 반응합니다. 설정에 포커스를 받="0"합니다 당신의 처리기입니다.

해설 (0)

필요하신 그것을 쓰는 이 방법

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

면onKeyPressed되지는 않습이,다음 다시 작성하는 그것은 화살표를 사용하여 기능 이나 바인딩은 구성요소에서생성자.

Panther
편집된 답변20일 4월 2017 в 1:28
해설 (5)

You'다시 생각에 너무 많은 순수한 자바 스크립트. 의 제거 당신의 청취자들에 반응할 수명 주기 방법과 사용이벤트입니다.키대신이벤트입니다.keyCode(기 때문에 이것은 JS 이벤트 객체가,그것은 반응SyntheticEvent). 의 전체 구성요소 간단할 수 있는 이(가정하지 않았't 밖에 없는 당신의 방법에서 생성자).

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">

        </div>
      </div>
    </div>
  )
}
steel
편집된 답변21일 4월 2017 в 4:12
해설 (6)