เหตุการณ์ onKeyDown ไม่ทำงานบน div ใน 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ไม่ได้ผูกไว้กับแล้วพยายามที่จะเขียนมันโดยใช้ฟังก์ชั่นลูกศรหรือผูกไว้ในส่วนประกอบthisconstructor

คุณคิดมากเกินไปใน Javascript แท้ กำจัดผู้ฟังของคุณด้วยวิธี React lifecycle และใช้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);
}