reactjsでドキュメントのキープレスを聞く

escapeプレス時にアクティブなreactブートストラップポップオーバーを閉じるためにバインドしたいです。コードは次のとおりです。

_handleEscKey:function(event){
         console.log(event);
        if(event.keyCode == 27){
          this.state.activePopover.hide();
        }
   },

  componentWillMount:function(){
     BannerDataStore.addChangeListener(this._onchange);
     document.addEventListener("click", this._handleDocumentClick, false);
     document.addEventListener("keyPress", this._handleEscKey, false);
   },


   componentWillUnmount: function() {
     BannerDataStore.removeChangeListener(this._onchange);
      document.removeEventListener("click", this._handleDocumentClick, false);
      document.removeEventListener("keyPress", this._handleEscKey, false);
   },

しかし、いずれかのキーを押しても、コンソールに何もログインしません。私はウィンドウでもそれをさまざまなケースで聴こうとしました。「keypress」、「keyup」などですが、何か間違ったことをしているようです。

を使用する必要がkeydownありkeypressます。

Keypress（非推奨）は通常、ドキュメントに従って文字出力を生成するキーにのみ使用されます

キープレス（非推奨）

keypressイベントは、キーが押されたときに発生し、そのキーは通常、文字値を生成します

キーダウン

キーダウンイベントは、キーが押されたときに発生します。

私自身もこれと同じような問題を抱えていました。修正を説明するためにあなたのコードを使用します。

// for other devs who might not know keyCodes
var ESCAPE_KEY = 27;

_handleKeyDown = (event) => {
    switch( event.keyCode ) {
        case ESCAPE_KEY:
            this.state.activePopover.hide();
            break;
        default: 
            break;
    }
},

// componentWillMount deprecated in React 16.3
componentDidMount(){
    BannerDataStore.addChangeListener(this._onchange);
    document.addEventListener("click", this._handleDocumentClick, false);
    document.addEventListener("keydown", this._handleKeyDown);
},


componentWillUnmount() {
    BannerDataStore.removeChangeListener(this._onchange);
    document.removeEventListener("click", this._handleDocumentClick, false);
    document.removeEventListener("keydown", this._handleKeyDown);
},

createClassの方法を使用しているため、this定義された各メソッドに暗黙的に含まれているように、特定のメソッドにバインドする必要はありません。

ここにReactコンポーネント作成のcreateClassメソッドを使用する動作するjsfiddleがあります。

React Hooksを使用できる場合は、を使用することをお勧めしますuseEffect。これにより、イベントリスナーは一度だけサブスクライブされ、コンポーネントがアンマウントされると適切にサブスクライブ解除されます。

以下の例はhttps://usehooks.com/useEventListener/から抽出されました：

// Hook
function useEventListener(eventName, handler, element = window){
  // Create a ref that stores handler
  const savedHandler = useRef();

  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
  // ... without us needing to pass it in effect deps array ...
  // ... and potentially cause effect to re-run every render.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(
    () => {
      // Make sure element supports addEventListener
      // On 
      const isSupported = element && element.addEventListener;
      if (!isSupported) return;

      // Create event listener that calls handler function stored in ref
      const eventListener = event => savedHandler.current(event);

      // Add event listener
      element.addEventListener(eventName, eventListener);

      // Remove event listener on cleanup
      return () => {
        element.removeEventListener(eventName, eventListener);
      };
    },
    [eventName, element] // Re-run if eventName or element changes
  );
};

たとえば、npmからインストールすることもできnpm i @use-it/event-listenerます-ここのプロジェクトを参照してください-https：//github.com/donavon/use-event-listener。

次に、コンポーネントで使用するには、イベント名とハンドラーを渡して、機能コンポーネント内で呼び出す必要があります。たとえばconsole.log、Escキーが押されるたびに実行する場合は、次のようにします。

import useEventListener from '@use-it/event-listener'

const ESCAPE_KEYS = ['27', 'Escape'];

const App = () => {
  function handler({ key }) {
    if (ESCAPE_KEYS.includes(String(key))) {
      console.log('Escape key pressed!');
    }
  }

  useEventListener('keydown', handler);

  return <span>hello world</span>;
}

この質問により関連性のあるJtosoの回答のバージョン。これは、外部ライブラリまたはAPIフックを使用してリスナーをバインド/バインド解除する他の回答よりもはるかに簡単だと思います。

var KEY_ESCAPE = 27;
...
    function handleKeyDown(event) {
        if (event.keyCode === KEY_ESCAPE) {
            /* do your action here */
        }
    }
...
    <div onKeyDown={handleKeyDown}>
...

タブ対応のdivにも同じ要件がありました。

次のコードは、items.map（（item）=>..。への呼び出しの中にありました。

  <div
    tabindex="0"
    onClick={()=> update(item.id)}
    onKeyDown={()=> update(item.id)}
   >
      {renderItem(item)}
  </div>

これは私のために働いた！

グローバルなイベントリスナーが欲しかったのですが、Reactポータルを使用しているために奇妙な動作をしていました。ドキュメント内のポータルモーダルコンポーネントでキャンセルされたにもかかわらず、イベントはドキュメント要素でトリガーされました。

コンポーネントツリー全体をラップするルートオブジェクトでイベントリスナーのみを使用するようになりました。ここでの問題は、最初はルート要素ではなくボディに焦点が合っているため、ツリー内の要素に焦点を合わせると、最初にイベントが発生することでした。

私が行った解決策は、tabindexを追加し、エフェクトフックで自動的にフォーカスすることです。

import React from "react";

export default GlobalEventContainer = ({ children, ...props }) => {
  const rootRef = React.useRef(null);
  useEffect(() => {
    if (document.activeElement === document.body && rootContainer.current) 
      rootContainer.current.focus();
    }
  });

  return <div {...props} tabIndex="0" ref={rootRef}>{children}</div>
};