小能豆

在 reactjs 中监听文档的按键

javascript

我想绑定以在escape按下时关闭活动的 React Bootstrap 弹出窗口。以下是代码

_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”等,但似乎我做错了什么。


阅读 39

收藏
2024-06-06

共1个答案

小能豆

您应该使用keydown而不是keypress。

Keypress(已弃用)通常仅用于根据文档产生字符输出的键

Keypress(已弃用)

当按下某个键并且该键通常会产生一个字符值时,会触发 keypress 事件

按键

当按下某个键时,会触发 keydown 事件。

2024-06-06