Listen to keypress for document in reactjs

You should use keydown and not keypress.

Keypress (deprecated) is usually used only for keys that produce a character output as per the docs

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.

Just had a similar problem with this myself. I'll use your code to illustrate a fix.

// for other devs who might not know keyCodesvar ESCAPE_KEY = 27;_handleKeyDown = (event) => {    switch( event.keyCode ) {        case ESCAPE_KEY:            this.state.activePopover.hide();            break;        default:             break;    }},// componentWillMount deprecated in React 16.3componentDidMount(){    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);},

Since you are using the createClass way of doing things, you do not need to bind to certain methods as this is implicit in each method defined.

There is a working jsfiddle, using the createClass method of React component creation here.

If you can use React Hooks, a good approach is to useEffect, so the event listener will be subscribed only once and properly unsubscribed when the component is unmounted.

The example below was extracted from https://usehooks.com/useEventListener/:

// Hookfunction 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  );};

You also could install it from npm, for example, npm i @use-it/event-listener - see the project here - https://github.com/donavon/use-event-listener.

Then, to use it in your component you just have to call it inside your functional component passing the event name and the handler. For example, if you want to console.log every time the Escape key is pressed:

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>;}