[Edit]

React - Keyboard Events

1 contributors

2 contributions

0 discussions

0 points

Created by:

Elias999

819

In this article, we would like to show you keyboard events in React.

There are three keyboard events:

onKeyUp
onKeyDown
onKeyPress

In the following example, we create functions that handle onKeyUp and onKeyDown events and display to the console which action was performed.

Note:

onKeyPress event is no longer recommended, so avoid using it.

Runnable example:

xxxxxxxxxx
 
// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
  const handleOnKeyDown = () => {
    console.log('key is pressed');
  }
  const handleOnKeyUp = () => {
    console.log('key is released');
  }
​
  return (
    <div>
      <input type="text"
        onKeyDown={handleOnKeyDown}
        onKeyUp={handleOnKeyUp}
        placeholder="press the key"
        />
    </div>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);