Question

123

Call function on keydown (Ctrl + Enter) in React

rated 0 times [ 124] [ 1] / answers: 1 / hits: 18174 / 8 Years ago, tue, september 6, 2016, 12:00:00

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;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynnb

Add To Favorites

Follow

Total Points: 402

Total Questions: 96

Total Answers: 109

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

kaitlynnb questions

1 'node_modules' is not recognized as an internal or external command, operable program or batch file

Tue, Oct 12, 21, 00:00, 3 Years ago

1 Cannot read properties of undefined (reading 'size')

Thu, Sep 16, 21, 00:00, 3 Years ago

1 How to Disable the ENTER Key in React Material UI Autocomplete form

Thu, Aug 26, 21, 00:00, 3 Years ago

1 Get only specific values in array of objects in JavaScript

Tue, Jun 23, 20, 00:00, 4 Years ago

1 Extracting parts of a text in Cypress

Mon, May 20, 19, 00:00, 5 Years ago

View All

answered 8 Years ago stacyl · Accepted Answer

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;