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의 이벤트 를 수신 하려면 tabIndex 속성을 사용해야합니다 onKeyDown. 설정 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={this.onKeyPressed}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

대답

<div 
    className="player"
    onKeyDown={this.onKeyPressed}
    tabIndex={0}
>

나를 위해 작동합니다. tabIndex에는 문자열이 아닌 숫자가 필요하므로 tabIndex = "0"이 작동하지 않습니다.

또는 작동 하는 div트릭을 사용 하지만 사용자가 요소가 아닌 뷰에 초점을 맞출 때마다 전체 웹 사이트에 추악한 초점 개요가 표시됩니다. 이는 div가 포커스에서 사용할 CSS를 설정하여 해결할 수 있습니다 .tab_index="0"tabIndex="-1"outline: none

다음은 스타일이 지정된 구성 요소를 사용한 구현입니다.

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

그리고 App 클래스에서 :

  render() {
    return (      
      <KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
          Display stuff...
      </KeyReceiver>
    )

생성자에서 메서드 바인딩이 누락되었습니다. 이것이 React가 제안하는 방법입니다.

class Whatever {
  constructor() {
    super();
    this.onKeyPressed = this.onKeyPressed.bind(this);
  }

  onKeyPressed(e) {
    // your code ...
  }

  render() {
    return (<div onKeyDown={this.onKeyPressed} />);
  }
}

이를 수행하는 다른 방법이 있지만 이것이 런타임에 가장 효율적입니다.

기본 이벤트가 트리거되지 않도록해야합니다.

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