Reputation: 6168
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;
Upvotes: 18
Views: 23145
Reputation: 11847
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>
);
}
Upvotes: 9
Reputation: 10421
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;
Upvotes: 30