[解決済み] 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イベントは、キーが押下されたときに発生します。
関連
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] ReactJSでコンポーネントがtext型の非制御入力を制御エラーに変更する場合
-
[解決済み] ReactJS - .JSと.JSXの比較
-
[解決済み] ReactJsです。this.props.childrenのPropTypesはどうすればいいのでしょうか?
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み] ReactJS - コンポーネントにカスタムイベントリスナーを追加する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] validateDOMNesting警告React
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] Reactコンポーネント外でのクリックを検出する