Acara onKeyDown tidak berfungsi pada div di React

Saya ingin menggunakan acara keyDown pada div di React. Saya melakukan:

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

Ini berfungsi dengan baik, tetapi saya ingin melakukannya lebih banyak dalam gaya React. Saya mencoba

        onKeyDown={this.onKeyPressed}

pada komponen. Tapi itu tidak bereaksi. Ia bekerja pada elemen masukan seingat saya.

Codepen

Bagaimana saya bisa melakukannya?

Anda harus menggunakan atribut tabIndex agar dapat mendengarkan onKeyDownevent pada div di React. Pengaturan tabIndex="0"harus memecat pawang Anda.

Anda perlu menulisnya seperti ini

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

Jika onKeyPressedtidak terikat this, coba tulis ulang menggunakan fungsi panah atau ikat di komponen constructor.

Anda terlalu banyak berpikir dalam Javascript murni. Singkirkan listener Anda pada metode siklus hidup React dan gunakan event.keysebagai ganti event.keyCode(karena ini bukan objek event JS, ini adalah React SyntheticEvent ). Seluruh komponen Anda bisa sesederhana ini (dengan asumsi Anda belum mengikat metode Anda dalam konstruktor).

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

Jawabannya dengan

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

berfungsi untuk saya, harap perhatikan bahwa tabIndex memerlukan angka, bukan string, jadi tabIndex = "0" tidak berfungsi.

Menggunakan divtrik dengan tab_index="0"atau tabIndex="-1"berfungsi, tetapi setiap kali pengguna memfokuskan tampilan yang bukan elemen, Anda mendapatkan garis besar fokus yang jelek di seluruh situs web. Ini bisa diperbaiki dengan menyetel CSS untuk div yang akan digunakan outline: nonedalam fokus.

Berikut implementasinya dengan komponen bergaya:

import styled from "styled-components"

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

dan di kelas Aplikasi:

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

Anda kehilangan pengikatan metode di konstruktor. Beginilah cara React menyarankan Anda melakukannya:

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

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

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

Ada cara lain untuk melakukan ini, tetapi ini akan menjadi yang paling efisien saat runtime.

Anda harus mencegah peristiwa default memicu.

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