onKeyDown olayı React'teki div'ler üzerinde çalışmıyor

React'teki bir div üzerinde keyDown olayını kullanmak istiyorum. Yaparı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>
    )
  }

İyi çalışıyor, ancak bunu daha çok React tarzında yapmak istiyorum. denedim

        onKeyDown={this.onKeyPressed}

bileşen üzerinde. Ama tepki vermiyor. Hatırladığım kadarıyla girdi öğeleri üzerinde çalışıyor.

Codepen

Nasıl yapabilirim?

React'teonKeyDown bir div üzerindeki olayı dinleyebilmek için tabIndex niteliğini kullanmalısınız . Ayar tabIndex="0", işleyicinizi ateşlemelidir.

Bu şekilde yazmalısın

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

onKeyPressedBağlı değilse , thisok işlevini kullanarak yeniden yazmaya çalışın veya bileşene bağlayınconstructor .

Saf Javascript ile çok fazla düşünüyorsun. Bu React yaşam döngüsü yöntemlerinde dinleyicilerinizden kurtulun ve event.keyyerine kullanın event.keyCode(çünkü bu bir JS olay nesnesi değildir, bir React SyntheticEvent'tir ). Bileşeninizin tamamı bu kadar basit olabilir (yöntemlerinizi bir yapıcıda bağlamadığınızı varsayarak).

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

İle cevap

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

benim için çalışıyor, lütfen tabIndex'in bir dize değil bir sayı gerektirdiğini unutmayın, bu nedenle tabIndex = "0" çalışmaz.

divHile ile kullanmak tab_index="0"veya tabIndex="-1"işe yarıyor, ancak kullanıcı öğe olmayan bir görünüme odaklandığında, tüm web sitesinde çirkin bir odak çizgisi elde edersiniz. Bu, div'in kullanması için CSS'yi ayarlayarak düzeltilebiliroutline: none , odakta .

İşte stilli bileşenlerle uygulama:

import styled from "styled-components"

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

ve Uygulama sınıfında:

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

Yapıcıdaki yöntemin bağlamasını kaçırıyorsunuz. React, bunu yapmanızı şöyle öneriyor:

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

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

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

Bunu yapmanın başka yolları da vardır, ancak bu, çalışma zamanında en verimli olanı olacaktır.

Varsayılan olayın tetiklenmesini önlemelisiniz.

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