onKeyDown event not working on divs in React

Question

I want to use a keyDown event on a div in React. I do:

  componentWillMount() {
      document.addEventListener(\"keydown\", this.onKeyPressed.bind(this));
          


        

Answer 1

Using the div trick with tab_index="0" or tabIndex="-1" works, but any time the user is focusing a view that's not an element, you get an ugly focus-outline on the entire website. This can be fixed by setting the CSS for the div to use outline: none in the focus.

Here's the implementation with styled components:

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

and in the App class:

  render() {
    return (      
      
          Display stuff...
      
    )