JIYIK CN >

Handling onKeyDown event in React:

1. Set the onKeyDown prop on the element.
2. Use the key property of the event object to get the key that the user pressed.
3. For example, if(event.key === 'Enter') {}.

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleKeyDown = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      console.log('✅ Enter key pressed');
    }

    // 👇️ access input value from state
    // console.log(message);

    // 👇️ access input value from event object
    // console.log(event.target.value)
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onKeyDown={handleKeyDown}
        onChange={event => setMessage(event.target.value)}
      />
    </div>
  );
};

export default App;

If you need to set an event listener on a div element onKeyDown, scroll down to the next code snippet.

We set the attribute on the inputonKeyDown element , so every time the user presses the button while the input has focus, handleKeyDownthe function will be called.

The key property of the event object returns the value of the key pressed by the user.

Each time the user presses a key, handleKeyDownthe function runs and we check to see if the user pressed Enter.

Conditions if (event.key === 'Enter') {}All operating systems are covered - Windows, Mac, Linux, Android, etc.

If you need to set an event listener on a div element onKeyDown, set the tabIndex attribute on the element to give it focus.

const App = () => {
  const handleKeyDown = event => {
    console.log('User pressed: ', event.key);
  };

  return (
    <div>
      <div tabIndex={0} onKeyDown={handleKeyDown}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
};

export default App;

By default, div elements are not focusable, so in order to handle events on the div , we have to set the tabIndexonKeyDown property on the element .

tabIndexThe attribute indicates which element can be focused and where it participates in sequential keyboard navigation (using the Tab key).

When an element's tabIndex is set to 0 , the element is focusable in sequential keyboard navigation after any positive tabIndex value.

For example, if other elements on the page have tab indexes 1 , 2 , 3 , and so on, then the element with tab index 0 will receive focus after elements with positive tab indexes.

We can also set the tabIndex of an element to -1 , which means that the element cannot be accessed via sequential keyboard navigation (using the Tab key), but can be given focus using JavaScript or by a mouse click.