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 — Evan Davis
– Evan Davis, Commented Apr 2, 2016 at 14:45

Community · Accepted Answer · 2017-05-23 12:31:33Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 2, 2016 at 13:14

André Junges

5,3673 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS keyevent not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related