reactjs - 在reactjs中监听文档的按键

Question

我想绑定(bind)以在按下 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”等，但似乎我做错了什么。

Answer 1

您应该使用keydown而不是keypress。

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

Keypress (deprecated)

The keypress event is fired when a key is pressed down and that key normally produces a character value

Keydown

The keydown event is fired when a key is pressed down.