100

我想绑定以在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'等，但似乎我做错了什么。

4

6 回答 6

69

你应该使用keydown而不是keypress.

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

按键（已弃用）

keypress 事件在一个键被按下并且该键通常产生一个字符值时触发

按键

keydown 事件在按下某个键时触发。

于 2015-03-16T04:53:10.500 回答
58

我自己也有类似的问题。我将使用您的代码来说明修复。

// 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定义的每个方法中隐含的那样绑定到某些方法。

有一个工作 jsfiddle，在这里使用 React 组件创建的 createClass 方法。

于 2017-02-18T09:43:42.983 回答
40

如果你可以使用 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每次按下 Escape 键：

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>;
}
于 2019-09-13T15:18:29.437 回答
3

与这个问题更相关的 Jt oso 答案的一个版本。我认为这比使用外部库或 API 挂钩绑定/取消绑定侦听器的其他答案要简单得多。

var KEY_ESCAPE = 27;
...
    function handleKeyDown(event) {
        if (event.keyCode === KEY_ESCAPE) {
            /* do your action here */
        }
    }
...
    <div onKeyDown={handleKeyDown}>
...
于 2019-11-23T19:47:55.467 回答
1

我想拥有全局事件侦听器，但由于使用了 React Portals 而出现了奇怪的行为。尽管在文档中的门户模式组件上取消了该事件，但该事件仍然在文档元素上触发。

我转向仅在包装整个组件树的根对象上使用事件侦听器。这里的问题是，最初聚焦的是主体而不是根元素，因此一旦你聚焦树中的一个元素，事件就会首先被触发。

我采用的解决方案是添加一个 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>
};
于 2020-04-13T11:14:52.423 回答
1

我对可选项卡的 div 有相同的要求。

对我来说，以下代码在对 items.map((item)=> ... 的调用中

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

这对我有用！

于 2018-08-10T17:14:49.797 回答