Call function on keydown (Ctrl + Enter) in React

Question

I'm making an app and I want to fire a function (in this case the showMessage) when the user presses Ctrl + Enter. How would I do this, preferably without jQuery?

import React from "react"
const App = React.createClass({
 showMessage () {
 console.log('hit');
 },
 render () {
 return (
 <div>
 <button onClick={this.showMessage}>Hit</button>
 </div>
 );
 }
});
module.exports = App;

• Igorsvee: Register onkeypress handler for the document in componentDidMount

Answer 1

1. add event listener: document.addEventListener('keydown',this.keydownHandler)

2. then in handler check e.keyCode===13 && e.ctrlKey

3. don't forget to remove event listener in componentWillUnmount

const App = React.createClass({
 showMessage () {
 alert('SOME MESSAGE');
 },
 keydownHandler(e){
 if(e.keyCode===13 && e.ctrlKey) this.showMessage()
 },
 componentDidMount(){
 document.addEventListener('keydown',this.keydownHandler);
 },
 componentWillUnmount(){
 document.removeEventListener('keydown',this.keydownHandler);
 },
 render () {
 return (
 <div>
 <h1>Press Ctrl+Enter</h1>
 <button onClick={this.showMessage}>Hit</button>
 </div>`
 );
 }
});
export default App;

• WillKre: Perfect. Just added it to my project and it works great. Thanks!
• Aaron Ford: keyCode is now deprecated. Use e.key === 'Enter' && e.ctrlKey instead.

Answer 2

Can also be done using functional components too

export function App() {
 const showMessage = () => {
 alert('SOME MESSAGE');
 };
 const keydownHandler = (e) => {
 if(e.key === 'Enter' && e.ctrlKey) showMessage()
 };
 React.useEffect(() => {
 document.addEventListener('keydown', keydownHandler);
 return () => {
 document.removeEventListener('keydown', keydownHandler);
 }
 }, []);
 return (
 <div>
 <h1>Press Ctrl+Enter</h1>
 <button onClick={showMessage}>Hit</button>
 </div>
 );
}