How can I handle keyboard events in React?

How can I handle keyboard events in React?

You can handle keyboard events in React by using event handlers like onKeyDown, onKeyUp, and onKeyPress.

Can you show me an example of using onKeyDown?

Sure! Here's a simple example:

function MyComponent() {
  const handleKeyDown = (event) => {
    console.log('Key pressed:', event.key);
  };

  return <input type='text' onKeyDown={handleKeyDown} />;
}

What about handling multiple keys at once?

You can check for multiple keys by using conditions in your event handler. For example:

const handleKeyDown = (event) => {
  if (event.key === 'Control' && event.key === 'c') {
    console.log('Copy command detected!');
  }
};

Are there any best practices for keyboard event handling?

Yes! Always ensure accessibility by using semantic HTML and consider using libraries like React Aria for better keyboard handling.