score:23
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;
Source: stackoverflow.com
Related Query
- Call function on keydown (Ctrl + Enter) in React
- React js call to a function when enter key is pressed
- How to call loading function with React useEffect only once
- Call a static function into the class React ES6
- Call external Javascript function from react components
- React hooks: call component as function vs render as element
- How to call a function every minute in a React component?
- When to call function vs function() in react onClick?
- React JSX vs function call to present component
- Call function from another React component
- Call function onPress React Native
- Best practices for using React refs to call child function
- Call API Every X Seconds in React Function Component
- Call React Component Function from onclick in dangerouslySetInnerHTML
- React 16: Call children's function from parent when using hooks and functional component
- React - How do you call a function from inside another function
- Call react function from JQ function
- How to call a component function on other component, but from the other component ? React
- react functional component with ag grid cannot call parent function via context
- Is it possible to call a function in a parent component in React Native?
- React - Call props function inside of a components function
- Call function on click of link in react js
- React does useState by default call function without parenthesis
- Why does react call render function if I have not changed the reference of the state?
- react webpack setup - Cannot call a class as a function
- React Higher Order Component - call function in the wrapped component from the wrapper component
- Correct way to call passport js function from react component
- call react function inside anonymous function
- How to Call selector function from React Component?
- React - returning api call result to original function
More Query from same tag
- Expected to return a value at the end of arrow function with if statement
- Catch return json from POST with Axios when error 400 (Bad Request) occurs
- React native vector icon not working on current version 0.60
- React Big Calendar label - get year in week view
- React Sell all button currency
- Reactjs - Material UI- reduc form framework - grouped checkbox required validation error fixing to have at least one checkbox required
- Redux unwanted effect on .splice()
- Change state onClick React+Redux
- Why I can't fill anything in my form in React?
- Trying to add to get information from an api call to my backend
- Redux previous state already has new state value can't understand why
- ScrollMagic GSAP, Import issues
- How to do condtitional rendering in React and ES6 inside the map function
- Using multiple `useState()` states together
- How to make external javascript file work in ReactJs?
- trying to convert calc app to typescript, what type is this function suppose to be?
- CustomError typescript, wrong instance of the error inside the component
- How I can create one component for different JSON files with the same structure
- Exporting data to a variable number of components in React
- Real-Time use case of this.props.children
- How to solve this error when running 'yarn start'?
- How to conditionally render routes with react-router-dom?
- Diagram is not rendering - Dagre-d3
- How to change the progress bar background color dynamically in react material ui?
- Attempting to access link to state within another component results in a typerror where state in undefined
- React: potential race condition for Controlled Components
- How to call a function in the children first then call a function in parent
- Adding an id to React/Gatsby component for hash link
- MUI - makeStyles - Cannot read properties of undefined
- Can this be optimized even further using object methods or other way in javascript?