OnKeyDown 이벤트가 React의 div에서 작동하지 않음

OnKeyDown 이벤트가 React의 div에서 작동하지 않음

리액트의 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}

컴포넌트 상에 있습니다.근데 반응이 없어요.내 기억으로는 입력 요소에서 작동한다.

코드펜

어떻게 해야 하죠?

수신하려면 tabIndex 속성을 사용해야 합니다.onKeyDown리액트의 div에서 이벤트를 발생시킵니다.설정tabIndex="0"당신 담당자를 해고해야 해요

이렇게 써야 돼요.

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

한다면onKeyPressed에 얽매이지 않다this화살표 기능을 사용하여 다시 쓰거나 컴포넌트에 바인드합니다.constructor.

당신은 순수한 자바스크립트로 너무 많은 생각을 하고 있어요.리액트 라이프 사이클 방법에 대한 청취자를 배제하고event.key대신event.keyCode(이것은 JS 이벤트오브젝트가 아니기 때문에 React Synthetic Event입니다).전체 구성 요소는 다음과 같이 단순할 수 있습니다(생성자에서 메서드를 바인딩하지 않은 경우).

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을 가지고 속이다.tab_index="0"또는tabIndex="-1"동작하지만 사용자가 요소가 아닌 뷰에 초점을 맞추면 웹 사이트 전체에서 보기 흉한 포커스가 표시됩니다.이 문제는 div가 사용할 CSS를 설정함으로써 해결할 수 있습니다.outline: none초점 안에 있어요.

스타일 컴포넌트를 사용한 실장은 다음과 같습니다.

import styled from "styled-components"

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

앱 클래스에서 다음을 수행합니다.

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

또한 이 트릭은 div에 초점을 맞출 때만 작동한다는 것을 기억하십시오.div가 뜨자마자 키 프레스를 관리하려면 이 트릭을 사용할 수 있습니다(특히 드로어/모듈에 유용합니다).

정답은

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

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

이 문제에 대해 문제가 있는 다른 사람들은 내가 키를 누른 상태에서 키를 올린 상태에서 작동하지 않는 플롯을 잃었습니다.

내가 필요했던 건 이 정도면 충분했어요.

import './App.css'

function App() {
  const handleDown = () => {
    console.log('down')
  }
  const handleUp = () => {
    console.log('up')
  }
  return (
    <button onMouseDown={handleDown} onMouseUp={handleUp}>
      PRESS DOWN
    </button>
  )
}

export default App

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