to call onChange event after pressing Enter key

Question

I am new to Bootstrap and stuck with this problem  I have an input field and as soon as I enter just one digit  the function from onChange is called  but I want it to be called when I push  Enter when the whole number has been entered  The same problem for the validation function - it calls too soon   var inputProcent   React CreateElement bootstrap Input   type   text       bsStyle  this validationInputFactor      placeholder  this initialFactor    className   input-block-level     onChange  this handleInput    block  true    addonBefore         ref  input     hasFeedback  true

User · Answer

pressing Enter when the focus in on a form control  input  normally triggers a submit  onSubmit  event on the form itself  not the input  so you could bind your this handleInput to the form onSubmit   Alternatively you could bind it to the blur  onBlur  event on the input which happens when the focus is removed  e g  tabbing to the next element that can get focus

User · Answer

According to React Doc  you could listen to keyboard events  like onKeyPress or onKeyUp  not onChange   var Input   React createClass     render  function          return  lt input type  text  onKeyDown  this  handleKeyDown    gt           handleKeyDown  function e        if  e key      Enter           console log  do validate                    Update  Use React Component  Here is the code using React Component which does the same thing  class Input extends React Component      handleKeyDown    e    gt        if  e key      Enter           console log  do validate                 render         return  lt input type  text  onKeyDown  this  handleKeyDown    gt          Here is the jsfiddle   Update 2  Use a functional component  const Input        gt      const handleKeyDown    event    gt        if  event key      Enter           console log  do validate                return  lt input type  text  onKeyDown  handleKeyDown    gt

User · Answer

I prefer onKeyUp since it only fires when the key is released  onKeyDown  on the other hand  will fire multiple times if for some reason the user presses and holds the key  For example  when listening for  quot pressing quot  the Enter key to make a network request  you don t want that to fire multiple times since it can be expensive     handler could be passed as a prop  lt input type  quot text quot  onKeyUp  handleKeyPress    gt   handleKeyPress e    if  e key      Enter          do whatever      Also  stay away from keyCode since it will be deprecated some time

User · Answer

You can use event key   x000D   x000D  function Input  onKeyPress     x000D    return   x000D       lt div gt  x000D         lt h2 gt Input lt  h2 gt  x000D         lt input type  text  onKeyPress  onKeyPress   gt  x000D       lt  div gt  x000D      x000D    x000D   x000D  class Form extends React Component   x000D    state    value     x000D   x000D    handleKeyPress    e    gt    x000D      if  e key      Enter     x000D        this setState  value e target value   x000D        x000D      x000D   x000D    render     x000D      return   x000D         lt section gt  x000D           lt Input onKeyPress  this handleKeyPress   gt  x000D           lt br  gt  x000D           lt output gt  this state value  lt  output gt  x000D         lt  section gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  x000D     lt Form   gt   x000D    document getElementById  react   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   lt div id  react  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use onKeyPress directly on input field  onChange function changes state value on every input field change and after Enter is pressed it will call a function search      lt input     type  text      placeholder  Search         onChange  event   gt   this setState  query  event target value         onKeyPress  event   gt                    if  event key      Enter                       this search                                        gt

User · Answer

You can also write a little wrapper function like this  const onEnter    event  callback    gt  event key      Enter   amp  amp  callback     Then consume it on your inputs   lt input      type  text       placeholder  Title of todo       onChange  e   gt  setName e target value       onKeyPress  e   gt  onEnter e  addItem    gt

User · Answer

React users  here s an answer for completeness      React version 16 4 2   You either want to update for every keystroke  or get the value only at submit  Adding the key events to the component works  but there are alternatives as recommended in the official docs   Controlled vs Uncontrolled components  Controlled  From the Docs - Forms and Controlled components      In HTML  form elements such as input  textarea  and select typically   maintain their own state and update it based on user input  In React    mutable state is typically kept in the state property of components    and only updated with setState         We can combine the two by making the React state be the    single source   of truth     Then the React component that renders a form also controls   what happens in that form on subsequent user input  An input form   element whose value is controlled by React in this way is called a      controlled component       If you use a controlled component you will have to keep the state updated for every change to the value  For this to happen  you bind an event handler to the component  In the docs  examples  usually the onChange event   Example   1  Bind event handler in constructor  value kept in state   constructor props        super props       this state    value            this handleChange   this handleChange bind this       2  Create handler function  handleChange event        this setState  value  event target value        3  Create form submit function  value is taken from the state   handleSubmit event        alert  A name was submitted      this state value       event preventDefault        4  Render   lt form onSubmit  this handleSubmit  gt       lt label gt        Name         lt input type  text  value  this state value  onChange  this handleChange    gt       lt  label gt       lt input type  submit  value  Submit    gt   lt  form gt    If you use controlled components  your handleChange function will always be fired  in order to update and keep the proper state  The state will always have the updated value  and when the form is submitted  the value will be taken from the state  This might be a con if your form is very long  because you will have to create a function for every component  or write a simple one that handles every component s change of value   Uncontrolled  From the Docs - Uncontrolled component     In most cases  we recommend using controlled components to implement   forms  In a controlled component  form data is handled by a React   component  The alternative is uncontrolled components  where form data   is handled by the DOM itself       To write an uncontrolled component  instead of writing an event   handler for every state update  you can use a ref to get form values   from the DOM    The main difference here is that you don t use the onChange function  but rather the onSubmit of the form to get the values  and validate if neccessary   Example   1  Bind event handler and create ref to input in constructor  no value kept in state   constructor props        super props       this handleSubmit   this handleSubmit bind this       this input   React createRef        2  Create form submit function  value is taken from the DOM component   handleSubmit event        alert  A name was submitted      this input current value       event preventDefault        3  Render   lt form onSubmit  this handleSubmit  gt       lt label gt        Name         lt input type  text  ref  this input    gt       lt  label gt       lt input type  submit  value  Submit    gt   lt  form gt    If you use uncontrolled components  there is no need to bind a handleChange function  When the form is submitted  the value will be taken from the DOM and the neccessary validations can happen at this point  No need to create any handler functions for any of the input components as well   Your issue  Now  for your issue          I want it to be called when I push  Enter when the whole number has been entered   If you want to achieve this  use an uncontrolled component  Don t create the onChange handlers if it is not necessary  The enter key will submit the form and the handleSubmit function will be fired   Changes you need to do   Remove the onChange call in your element  var inputProcent   React CreateElement bootstrap Input   type   text             bsStyle  this validationInputFactor        placeholder  this initialFactor      className   input-block-level          onChange  this handleInput      block  true      addonBefore           ref  input       hasFeedback  true       Handle the form submit and validate your input  You need to get the value from your element in the form submit function and then validate  Make sure you create the reference to your element in the constructor     handleSubmit event             Get value of input field       let value   this input current value        event preventDefault             Validate  value  and submit using your own api or something       Example use of an uncontrolled component   class NameForm extends React Component     constructor props        super props          bind submit function     this handleSubmit   this handleSubmit bind this          create reference to input field     this input   React createRef           handleSubmit event           Get value of input field     let value   this input current value      console log  value in input field      value        event preventDefault           Validate  value  and submit using your own api or something        render         return          lt form onSubmit  this handleSubmit  gt           lt label gt            Name             lt input type  text  ref  this input    gt           lt  label gt           lt input type  submit  value  Submit    gt         lt  form gt                ReactDOM render     lt NameForm   gt     document getElementById  root

User · Answer

Here is a common use case using class-based components  The parent component provides a callback function  the child component renders the input box  and when the user presses Enter  we pass the user s input to the parent  class ParentComponent extends React Component     processInput value        alert  Parent got the input    value          render         return          lt div gt           lt ChildComponent handleInput   value    gt  this processInput value     gt         lt  div gt               class ChildComponent extends React Component     constructor props        super props       this handleKeyDown   this handleKeyDown bind this          handleKeyDown e        if  e key      Enter           this props handleInput e target value                render         return          lt div gt           lt input onKeyDown  this handleKeyDown    gt         lt  div gt

[javascript] to call onChange event after pressing Enter key

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to reactjs