onKeyDown event not working on divs in React
You're thinking too much in pure Javascript. Get rid of your listeners on those React lifecycle methods and use event.key
instead of event.keyCode
(because this is not a JS event object, it is a React SyntheticEvent). Your entire component could be as simple as this (assuming you haven't bound your methods in a constructor).
onKeyPressed(e) {
console.log(e.key);
}
render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}
You need to write it this way
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed}
tabIndex="0"
>
If onKeyPressed
is not bound to this
, then try to rewrite it using arrow function or bind it in the component constructor
.
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 (
<KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
Display stuff...
</KeyReceiver>
)
You should use tabIndex attribute to be able to listen onKeyDown
event on a div in React. Setting tabIndex="0"
should fire your handler.