1. ホーム
  2. reactjs

[解決済み] reactjs でドキュメントのキー入力を聞く

2022-12-24 10:19:54

質問

アクティブなreact bootstrapのポップオーバーを閉じるために escape を押す。

_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 (非推奨) は通常、docs にあるように、文字出力を生成するキーにのみ使用されます。

キープレス (非推奨)

<ブロッククオート

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

キーダウン

<ブロッククオート

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