Sự kiện onKeyDown không hoạt động trên div trong React

Tôi muốn sử dụng sự kiện keyDown trên div trong React. Tôi làm:

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

Nó hoạt động tốt, nhưng tôi muốn làm điều đó nhiều hơn theo phong cách React. Tôi đã thử

        onKeyDown={this.onKeyPressed}

trên thành phần. Nhưng nó không phản ứng. Nó hoạt động trên các yếu tố đầu vào như tôi nhớ lại.

Codepen

Tôi làm nó như thế nào?

Bạn nên sử dụng thuộc tính tabIndex để có thể lắng nghe onKeyDownsự kiện trên một div trong React. Cài đặt tabIndex="0"sẽ kích hoạt trình xử lý của bạn.

Bạn cần phải viết nó theo cách này

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

Nếu onKeyPressedkhông bị ràng buộc this, thì hãy thử viết lại nó bằng cách sử dụng hàm mũi tên hoặc ràng buộc nó trong thành phần constructor.

Bạn đang nghĩ quá nhiều về Javascript thuần túy. Loại bỏ trình lắng nghe của bạn trên các phương thức vòng đời React đó và sử dụng event.keythay thế event.keyCode(bởi vì đây không phải là một đối tượng sự kiện JS, nó là một React SyntheticEvent ). Toàn bộ thành phần của bạn có thể đơn giản như thế này (giả sử bạn chưa ràng buộc các phương thức của mình trong một hàm tạo).

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

Câu trả lời với

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

hoạt động đối với tôi, xin lưu ý rằng tabIndex yêu cầu một số, không phải một chuỗi, vì vậy tabIndex = "0" không hoạt động.

Sử dụng divthủ thuật có tab_index="0"hoặc hiệu tabIndex="-1"quả, nhưng bất cứ khi nào người dùng tập trung vào một chế độ xem không phải là một phần tử, bạn sẽ nhận được một đường viền tiêu điểm xấu xí trên toàn bộ trang web. Điều này có thể được khắc phục bằng cách đặt CSS cho div để sử dụng outline: nonetrong tiêu điểm.

Đây là cách triển khai với các thành phần được tạo kiểu:

import styled from "styled-components"

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

và trong lớp Ứng dụng:

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

Bạn đang thiếu ràng buộc của phương thức trong hàm tạo. Đây là cách React đề nghị bạn làm điều đó:

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

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

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

Có nhiều cách khác để làm điều này, nhưng cách này sẽ hiệu quả nhất trong thời gian chạy.

Bạn phải ngăn sự kiện mặc định kích hoạt.

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