Kreitzo Kreitzo - 3 months ago 33
React JSX Question

React: Call function with keydown (ctrl + enter)

I'm making an app and I want to fire up 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;

Answer

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

LIVE DEMO

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;