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;
add event listener: document.addEventListener('keydown',this.keydownHandler)
then in handler check e.keyCode===13 && e.ctrlKey
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With