onKeyDownイベントがReactのdivで機能しない

ReactのdivでkeyDownイベントを使用したいのですが。私がやります：

  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

どうすればできますか？

Reactのdivでイベントをリッスンできるようにするには、tabIndex属性を使用する必要がありますonKeyDown。設定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={(e) => this.onKeyPressed(e)}
    >
      <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トリックを使用しても、ユーザーが要素ではないビューに焦点を合わせているときはいつでも、Webサイト全体に醜いフォーカスの概要が表示されます。これは、divが使用するCSSを設定することで修正できますtab_index="0"tabIndex="-1"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);
}