How to handle the onKeyPress event in ReactJS

Question

How can I make the onKeyPress event work in ReactJS  It should alert when enter  keyCode 13  is pressed   var Test   React createClass       add  function event           if event keyCode    13               alert  Adding                             render  function            return               lt div gt                   lt input type  text  id  one  onKeyPress  this add    gt                   lt  div gt                        React render  lt Test   gt   document body

User · Answer

For me onKeyPress the e keyCode is always 0  but e charCode has correct value  If used onKeyDown the correct code in e charCode   var Title   React createClass       handleTest  function e          if  e charCode    13            alert  Enter     KeyPress  use charCode                   if  e keyCode    13            alert  Enter     KeyDown  use keyCode                        render  function           return           lt div gt             lt textarea onKeyPress  this handleTest    gt           lt  div gt                         React Keyboard Events

User · Answer

Late to the party  but I was trying to get this done in TypeScript and came up with this    lt div onKeyPress   e  KeyboardEvent lt HTMLDivElement gt     gt  console log e key     This prints the exact key pressed to the screen  So if you want to respond to all  a  presses when the div is in focus  you d compare e key to  a  - literally if e key      a

User · Answer

Keypress event is deprecated  You should use Keydown event instead   https   developer mozilla org en-US docs Web API Document keypress event  handleKeyDown event        if event keyCode     13             console log  Enter key pressed          render          return  lt input type  text  onKeyDown  this handleKeyDown    gt

User · Answer

render  function         return            lt div gt              lt input type  text  id  one  onKeyDown  this add    gt           lt  div gt              onKeyDown detects keyCode events

User · Answer

If you wanted to pass a dynamic param through to a function  inside a dynamic input     lt Input    onKeyPress   event    gt        if  event key      Enter           this doSearch data searchParam               placeholder  data placeholderText    gt    gt    Hope this helps someone

User · Answer

var Test   React createClass        add  function event            if event key      Enter                alert  Adding                                render  function            return              lt div gt               lt input type  text  id  one  onKeyPress   event    gt  this add event    gt                 lt  div gt

User · Answer

React is not passing you the kind of events you might think  Rather  it is passing synthetic events    In a brief test  event keyCode    0 is always true  What you want is event charCode

User · Answer

You need to call event persist    this method on your keyPress event  Example  const MyComponent    props    gt       const keyboardEvents    event    gt          event persist           console log event key      this will return string of key name like  Enter          return            lt div onKeyPress  keyboardEvents  gt  lt  div gt          If you now type console log event  in keyboardEvents function you will get other attributes like  keyCode    number charCode    number shiftKey    boolean ctrlKey    boolean altKey    boolean  And many other attributes Thanks  amp  Regards P S  React Version   16 13 1

User · Answer

There are some challenges when it comes to keypress event  Jan Wolter s article on key events is a bit old but explains well why key event detection can be hard   A few things to note    keyCode  which  charCode have different value meaning in keypress from keyup and keydown  They are all deprecated  however supported in major browsers  Operating system  physical keyboards  browsers versions  could all have impact on key code values  key and code are the recent standard  However  they are not well supported by browsers at the time of writing     To tackle keyboard events in react apps  I implemented react-keyboard-event-handler  Please have a look

User · Answer

I am working with React 0 14 7  use onKeyPress and event key works well   handleKeyPress    event    gt      if event key      Enter        console log  enter press here           render  function         return            lt div gt              lt input type  text  id  one  onKeyPress  this handleKeyPress    gt           lt  div gt

[javascript] How to handle the `onKeyPress` event in ReactJS?

Examples related to javascript

Examples related to reactjs

Examples related to keypress

Examples related to onkeypress