Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect 'Shift + Enter' in ReactJS onKeyPress event?

Tags:

How to detect 'Shift + Enter' in ReactJS onKeyPress event?

Is it possible ?

https://jsfiddle.net/jacobgoh101/cyLqfcts/3/

class App extends React.Component {   constructor(props) {     super(props);     this.handleKeyPress = this.handleKeyPress.bind(this);   }   handleKeyPress(e) {     console.log(e.key);     $('#app').append("<br/>" + e.key);   }   render() {     return ( < textarea defaultValue = {         ""       }       onKeyPress = {         this.handleKeyPress       }       />     );   } }  ReactDOM.render(<App/>, document.getElementById('app')); 
like image 893
Jacob Goh Avatar asked Sep 18 '16 15:09

Jacob Goh


1 Answers

Your answer is detecting on 'Enter' not 'Shift+Enter'. This should help! https://jsfiddle.net/Pranesh456/c2hzt27g/3/

class App extends React.Component {   constructor(props) {     super(props);     this.handleKeyPress = this.handleKeyPress.bind(this);   }   handleKeyPress(e) {     if (e.key === 'Enter' && e.shiftKey) {                $('#app').append("<br/> Detected Shift+Enter")     }   }   render() {     return (       <textarea          defaultValue = {""}         onKeyUp={this.handleKeyPress}       />     );   } }  ReactDOM.render(<App/>, document.getElementById('app')); 
like image 153
Pranesh Ravi Avatar answered Sep 17 '22 12:09

Pranesh Ravi