How to submit a form using Enter key in react js

Question

Here is my form and the onClick method  I would like to execute this method when the Enter button of keyboard is pressed  How     N B  No jquery is appreciated    comment  function  e            e preventDefault            this props comment  comment  this refs text getDOMNode   value  userPostId this refs userPostId getDOMNode   value              lt form className  commentForm  gt        lt textarea rows  2  cols  110  placeholder      Comment Here      ref  text     gt  lt br   gt       lt input type  text  placeholder  userPostId  ref  userPostId    gt   lt br   gt        lt button type  button  className  btn btn-success  onClick  this comment  gt Comment lt  button gt       lt  form gt

User · Answer

Use keydown event to do it      input  HTMLDivElement   null   null      onKeyDown    event  React KeyboardEvent lt HTMLDivElement gt    void   gt              keypress  event misbehaves on mobile so we track  Enter  key via  keydown  event       if  event key      Enter             event preventDefault            event stopPropagation            this onSubmit                       onSubmit       void   gt          if  input textContent             this props onSubmit input textContent            input focus             input textContent                          render           return             lt form className  commentForm  gt              lt input              className  comment-input               aria-multiline  true               role  textbox               contentEditable  true               onKeyDown  this onKeyDown               ref  node   gt  this input   node                gt              lt button type  button  className  btn btn-success  onClick  this onSubmit  gt Comment lt  button gt            lt  form gt

User · Answer

It s been quite a few years since this question was last answered  React introduced  Hooks  back in 2017  and  keyCode  has been deprecated   Now we can write this     useEffect      gt        const listener   event   gt          if  event code      Enter     event code      NumpadEnter             console log  Enter key was pressed  Run your function                callMyFunction                       document addEventListener  keydown   listener       return      gt          document removeEventListener  keydown   listener                      This registers a listener on the keydown event  when the component is loaded for the first time  It removes the event listener when the component is destroyed

User · Answer

import React    useEffect  useRef   from  react    function Example          let inp   useRef        useEffect      gt            if   inp  amp  amp   inp current  return          inp current focus            return      gt  inp   null               const handleSubmit        gt                             return            lt form             onSubmit  e   gt                    e preventDefault                    handleSubmit e                           gt               lt input                 name  quot fakename quot                  defaultValue  quot      quot                  ref  inp                  type  quot radio quot                  style                        position   quot absolute quot                       opacity  0                                  gt               lt button type  quot submit quot  gt                  submit              lt  button gt           lt  form gt           Enter code here sometimes in popups it would not work to binding just a form and passing the onSubmit to the form because form may not have any input  In this case if you bind the event to the document by doing  document addEventListener it will cause problem in another parts of the application  For solving this issue we should wrap a form and should put a input with what is hidden by css  then you focus on that input by ref it will be work correctly

User · Answer

I ve built up on  user1032613 s answer and on this answer and created a  quot on press enter click element with querystring quot  hook  enjoy  const   useEffect     require  quot react quot     const useEnterKeyListener      querySelectorToExecuteClick      gt        useEffect      gt              https   stackoverflow com a 59147255 828184         const listener    event    gt                if  event code      quot Enter quot     event code      quot NumpadEnter quot                     handlePressEnter                                      document addEventListener  quot keydown quot   listener            return      gt                document removeEventListener  quot keydown quot   listener                               const handlePressEnter        gt              https   stackoverflow com a 54316368 828184         const mouseClickEvents     quot mousedown quot    quot click quot    quot mouseup quot            function simulateMouseClick element                mouseClickEvents forEach  mouseEventType    gt                  element dispatchEvent                      new MouseEvent mouseEventType                            view  window                          bubbles  true                          cancelable  true                          buttons  1                                                                             var element   document querySelector querySelectorToExecuteClick           simulateMouseClick element              export default useEnterKeyListener   This is how you use it  useEnterKeyListener       querySelectorToExecuteClick   quot  submitButton quot        https   codesandbox io s useenterkeylistener-fxyvl file  src App js 399-407

User · Answer

this is how you do it if you want to listen for the  Enter  key  There is an onKeydown prop that you can use and you can read about it in react doc  and here is a  codeSandbox  const App        gt        const something  event   gt            if  event keyCode     13                console log  enter                   return        lt div className  App  gt           lt h1 gt Hello CodeSandbox lt  h1 gt           lt h2 gt Start editing to see some magic happen  lt  h2 gt           lt input  type  text  onKeyDown   e    gt  something e     gt       lt  div gt

User · Answer

Change  lt button type  button  to  lt button type  submit   Remove the onClick  Instead do  lt form className  commentForm  onSubmit  this onFormSubmit  gt   This should catch clicking the button and pressing the return key   onFormSubmit   e   gt      e preventDefault      const   name  email     this state       send to server with e g   window fetch           lt form onSubmit  this onFormSubmit  gt           lt button type  submit  gt Submit lt  button gt   lt  form gt

[reactjs] How to submit a form using Enter key in react.js?

Examples related to reactjs

Examples related to reactjs-flux