ReactJS keyevent not working

Question

Eventually I'm trying to move the object on the screen using keyboard arrow keys. At the moment I'm trying to see if the code responds to keys. It does not. I press arrow up and nothing gets output to browser console.

_handleKey(event){
    console.log(event);
    if(event.keyCode == 38){
      console.log("Arrow Up");
    }
   }

  componentDidMount() {
    document.addEventListener("keyPress", this._handleKey, false);
  }

The full code is here: http://codepen.io/wasteland/pen/GZvWeo

What do I do wrong?

Possible duplicate of [Detecting arrow key presses in JavaScript](http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript) — Evan Davis, Apr 02 '16 at 14:45

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

I think what you want to use is the keydown event.

document.addEventListener("keydown", this._handleKey, false);

arrow keys are only triggered by onkeydown, not onkeypress

Take a look into this as well

http://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx

edited May 23 '17 at 12:31

Community

1
1

answered Apr 02 '16 at 13:14

André Junges

5,297
3
34
48

ReactJS keyevent not working

1 Answers1