React not responding to key down event

Question

I'm trying to implement some very basic key press detection and I can't get it to work at all. I have a bare component that should be picking up on the onKeyDown event but nothing gets logged out in the console:

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent onKeyDown={this.handleKeyDown} />
    );
  }
}

React.render(<App />, document.getElementById('app'));

Answer 1

You'll need to assign a tabIndex-attribute for your element (the wrapping element for example) for it to receive keypresses. Then pass the keyDown handler to it with the props:

import React from 'react';
import { render } from 'react-dom';

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div> 
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent handleKeyDown={() => this.handleKeyDown()} />
    );
  }
}

render(<App />, document.getElementById('app')); 

Answer 2

The DOM wants the element to be focused in order to receive the keyboard event. If you don't want to hack the element with tabIndex or contentEditable to get it to focus, you could use native DOM event listeners on window, and define a different handler in each component that handles keyboard events.

Just be sure to remove the event listener when that component unmounts so all components aren't handling all the time:

  componentWillMount: function() {
    window.addEventListener('keydown', this.handleKeyDown);
  },

  componentWillUnmount: function() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },

Also, there appears to be an npm that provides similar functionality if that's easier: https://www.npmjs.com/package/react-keydown