Call function on keydown (Ctrl + Enter) in React

后端 未结 1 511
情书的邮戳
情书的邮戳 2020-12-16 14:49

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, p

1条回答
  •  失恋的感觉
    2020-12-16 15:18

    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 (
          

    Press Ctrl+Enter

    ` ); } }); export default App;

    0 讨论(0)
提交回复
热议问题