Подія onKeyDown не працює на divs в React

Я хочу використовувати подію keyDown на div у React. Я згоден:

  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

Як я можу це зробити?

Ви повинні використовувати атрибут tabIndex, щоб мати можливість прослуховувати onKeyDownподію на div в React. Параметр tabIndex="0"повинен запускати ваш обробник.

Вам потрібно написати це так

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

Якщо onKeyPressedце не пов’язано this, спробуйте переписати його за допомогою функції стрілки або прив’язати до компонента constructor.

Ви занадто багато думаєте на чистому Javascript. Позбудьтеся слухачів від цих методів життєвого циклу 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фокус tab_index="0"або tabIndex="-1"працює, але коли користувач фокусує погляд, який не є елементом, ви отримуєте некрасивий контур фокусування на всьому веб-сайті. Це можна виправити, встановивши CSS для div для використання 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);
}