How to set up in React app combination of buttons in event OnKeydown


I need to set up combination of buttons in input form of my react app.

  1. "CTRL + "ArrowUp"
  2. "ArrowUp"

My code is something like this.

//Form

<input onKeyDown={keyHandler}/>

//handler

const keyhandler = (e) => {

if(e.key === "ArrowUp") {//do something}

if(e.key === 'ArrowUp' && e.getModifierState("Control")) {//do another thing}

The problem is when event fired with combination, first ‘if’ also true. How separate "ArrowUp" and "ArrowUp" with ctrl button?

I also try like this (but it didn’t help):


if(e.key === 'ArrowUp' && event.ctrlKey){ //do another thing}

Source: React – Stack Overflow

November 11, 2021
Category : News
Tags: if-statement | javascript | key | keydown | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.