How to get the value of an input field using ReactJS

Question

I have the following React component   export default class MyComponent extends React Component        onSubmit e            e preventDefault            var title   this title          console log title              render            return                                lt form className  form-horizontal  gt                                       lt input type  text  className  form-control  ref   c    gt  this title   c  name  title    gt                                   lt  form gt                               lt button type  button  onClick  this onSubmit  className  btn  gt Save lt  button gt                                         The console is giving me undefined - any ideas what s wrong with this code

User · Answer

export default class App extends React Component       state            value              show             handleChange  e   gt     this setState  value e target value      submit     gt      this setState  show this state value      render        return           lt  gt             lt form onSubmit  this submit  gt                lt input type  quot text quot  value  this state value  onChange  this handleChange    gt                lt input type  quot submit quot    gt             lt  form gt             lt h2 gt  this state show  lt  h2 gt           lt   gt

User · Answer

Managed to get the input field value by doing something like this   import React    Component   from  react    class App extends Component    constructor props   super props    this state       username         this updateInput   this updateInput bind this   this handleSubmit   this handleSubmit bind this       updateInput event   this setState  username   event target value       handleSubmit    console log  Your input value is      this state username    Send state to the server code      render    return        lt div gt       lt input type  text  onChange  this updateInput  gt  lt  input gt       lt input type  submit  onClick  this handleSubmit   gt  lt  input gt       lt  div gt               output   Your input value is  x

User · Answer

your error is because of you use class and when use class we need to bind the functions with This in order to work well  anyway there are a lot of tutorial why we should  this  and what is  this  do in javascript   if you correct your submit button it should be work    lt button type  button  onClick  this onSubmit bind this   className  btn  gt Save lt  button gt    and also if you want to show value of that input in console you should use var title   this title value

User · Answer

There are three answers here  depending on the version of React you re  forced to  work ing  with  and whether you want to use hooks   First things first   It s important to understand how React works  so you can do things properly  protip  it s is super worth running through the React tutorial exercise on the React website  It s well written  and covers all the basics in a way that actually explains how to do things    Properly  here means that you re writing an application interface that happens to be rendered in a browser  all the interface work happens in React  not in  what you re used to if you re writing a web page   this is why React apps are  apps   not  web pages     React applications are rendered based off of two things    the component s properties as declared by whichever parent creates an instance of that component  which the parent can modify throughout its lifecycle  and the component s own internal state  which it can modify itself throughout its own lifecycle    What you re expressly not doing when you use React is generating HTML elements and then using those  when you tell React to use an  lt input gt   for instance  you are not creating an HTML input element  you are telling React to create a React input object that happens to render as an HTML input element  and whose event handling looks at  but is not controlled by  the HTML element s input events    When using React  what you re doing is generating application UI elements that present the user with  often manipulable  data  with user interaction changing the Component s state  which may cause a rerender of part of your application interface to reflect the new state  In this model  the state is always the final authority  not  whatever UI library is used to render it   which on the web is the browser s DOM  The DOM is almost an afterthought in this programming model  it s just the particular UI framework that React happens to be using   So in the case of an input element  the logic is    You type in the input element  nothing happens to your input element yet  the event got intercepted by React and killed off immediately  React forwards the event to the function you ve set up for event handling   that function may schedule a state update  if it does  React runs that state update  asynchronously   and will trigger a render call after the update  but only if the state update changed the state  only after this render has taken place will the UI show that you  typed a letter     All of that happens in a matter of milliseconds  if not less  so it looks like you typed into the input element in the same way you re used to from  just using an input element on a page   but that s absolutely not what happened   So  with that said  on to how to get values from elements in React   React 15 and below  with ES5  To do things properly  your component has a state value  which is shown via an input field  and we can update it by making that UI element send change events back into the component   var Component   React createClass     getInitialState  function         return         inputValue                    render  function         return                      lt input value  this state inputValue  onChange  this updateInputValue   gt                             updateInputValue  function evt        this setState         inputValue  evt target value                   So we tell React to use the updateInputValue function to handle the user interaction  use setState to schedule the state update  and the fact that render taps into this state inputValue means that when it rerenders after updating the state  the user will see the update text based on what they typed   addendum based on comments  Given that UI inputs represent state values  consider what happens if a user closes their tab midway  and the tab is restored  Should all those values they filled in be restored  If so  that s state   That might make you feel like a large form needs tens or even a hundred input forms  but React is about modeling your UI in a maintainable way  you do not have 100 independent input fields  you have groups of related inputs  so you capture each group in a component and then build up your  master  form as a collection of groups   MyForm    render       lt PersonalData  gt       lt AppPreferences  gt       lt ThirdParty  gt             This is also much easier to maintain than a giant single form component  Split up groups into Components with state maintenance  where each component is only responsible for tracking a few input fields at a time   You may also feel like it s  a hassle  to write out all that code  but that s a false saving  developers-who-are-not-you  including future you  actually benefit greatly from seeing all those inputs hooked up explicitly  because it makes code paths much easier to trace  However  you can always optimize  For instance  you can write a state linker  MyComponent   React createClass     getInitialState         return         firstName  this props firstName              lastName  this props lastName                                              componentWillMount         Object keys this state  forEach n   gt          let fn   n    Changed         this fn    evt   gt            let update               update n    evt target value          this setState update                            render  function         return Object keys this state  map n   gt           lt input         key  n           type  text          value  this state n           onChange  this n    Changed     gt                    Of course  there are improved versions of this  so hit up https   npmjs com and search for a React state linking solution that you like best  Open Source is mostly about finding what others have already done  and using that instead of writing everything yourself from scratch   React 16  and 15 5 transitional  and  modern  JS  As of React 16  and soft-starting with 15 5  the createClass call is no longer supported  and class syntax needs to be used  This changes two things  the obvious class syntax  but also the thiscontext binding that createClass can do  for free   so to ensure things still work make sure you re using  fat arrow  notation for this context preserving anonymous functions in onWhatever handlers  such as the onChange we use in the code here   class MyComponent extends React Component     constructor props        super props       this state           inputValue                   render         return                      lt input value  this state inputValue  onChange  evt   gt  this updateInputValue evt    gt                             updateInputValue evt        this setState         inputValue  evt target value                   You may also have seen people use bind in their constructor for all their event handling functions  like this   constructor props      super props     this handler   this handler bind this            render       return                lt element onclick  this handler   gt                   Don t do that   Almost any time you re using bind  the proverbial  you re doing it wrong  applies  Your class already defines the object prototype  and so already defines the instance context  Don t put bind of top of that  use normal event forwarding instead of duplicating all your function calls in the constructor  because that duplication increases your bug surface  and makes it much harder to trace errors because the problem might be in your constructor instead of where you call your code  As well as placing a burden of maintenance on others that you  have or choose  to work with   Yes  I know the react docs say it s fine  It s not  don t do it    React 16 8  using function components with hooks  As of React 16 8 the function component  i e  literally just a function that takes some props as argument can be used as if it s an instance of a component class  without ever writing a class  can also be given state  through the use of hooks   If you don t need full class code  and a single instance function will do  then you can now use the useState hook to get yourself a single state variable  and its update function  which works roughly the same as the above examples  except without the setState function call   import   useState   from  react    function myFunctionalComponentFunction       const  input  setInput    useState            is the initial state value   return        lt div gt       lt label gt Please specify  lt  label gt       lt input value  input  onInput  e   gt  setInput e target value    gt       lt  div gt           Previously the unofficial distinction between classes and function components was  function components don t have state   so we can t hide behind that one anymore  the difference between function components and classes components can be found spread over several pages in the very well-written react documentation  no shortcut one liner explanation to conveniently misinterpret for you   which you should read so that you know what you re doing and can thus know whether you picked the best  whatever that means for you  solution to program yourself out of a problem you re having

User · Answer

You can get an input value without adding  onChange  function   Just add to the input element a  ref attr     And then use this refs to get the input value when you need it

User · Answer

Give the  lt input gt  a unique id   lt input id  title      gt    and then use the standard Web API to reference it in the DOM  const title   document getElementById  title   value   No need to continually update the React state with every keypress  Simply get the value when it s required

User · Answer

if you use class component then only 3 steps- first you need to declare state for your input filed for example this state    name      Secondly  you need to write a function for setting the state when it changes in bellow example it is setName   and finally you have to write the input jsx for example                  lt  input value  this name  onChange    this setName     import React    Component   from  react   export class InputComponents extends Component       constructor props            super props           this state                  name                  agree false                   this setName   this setName bind this           this setAgree this setAgree bind this              setName e           e preventDefault            console log e target value           this setState               name e target value                      setAgree            this setState               agree   this state agree            function                 console log this state agree                        render             return                lt div gt                   lt input type  checkbox  checked  this state agree  onChange  this setAgree  gt  lt  input gt                   lt  input value  this state name  onChange    this setName   gt               lt  div gt                     export default InputComponents

User · Answer

Change your ref into  ref  title  and delete name  title  Then delete var title   this title and write   console log this refs title value    Also you should add  bind this  to this onSubmit   It worked in my case which was quite similar  but instead of onClick I had onSubmit       and it was put in form    lt form onSubmit        gt  lt  form gt

User · Answer

using uncontrolled fields   export default class MyComponent extends React Component        onSubmit e            e preventDefault            console log e target neededField value              render            return                                lt form onSubmit  this onSubmit  className  form-horizontal  gt                                       lt input type  text  name  neededField  className  form-control  ref   c    gt  this title   c  name  title    gt                                   lt  form gt                               lt button type  button  className  btn  gt Save lt  button gt

User · Answer

On the state constructor       this state        email              Input view   always check if property is available in state  this state email   this state email         lt Input    value  this state email   this state email          onChange  event   gt  this setState   email  event target value     type  text     name  emailAddress     placeholder  johdoe somewhere com    gt

User · Answer

In react 16  I use   lt Input id  number          type  time          onChange   evt    gt    console log evt target value        gt

User · Answer

I succeeded in doing this by binding the  this  to the function  updateInputValue evt  with   this updateInputValue   this updateInputValue bind this    However input value  this state inputValue      turned out to be no good idea    Here s the full code in babel ES6     class InputField extends React Component      constructor props      super props        this state  inputfield   no value          this handleClick   this handleClick bind this      this updateInputValue   this updateInputValue bind this          handleClick       console log  trying to add picture url       console log  value of input field     this state inputfield           updateInputValue evt         console log  input field updated with   evt target value       this state  inputfield  evt target value              render        var r       r  lt div gt  lt input type  text  id  addpixinputfield               onChange  this updateInputValue    gt         lt input type  button  value  add  id  addpix  onClick  this handleClick   gt         lt  div gt           return r

User · Answer

export default class MyComponent extends React Component    onSubmit e        e preventDefault        var title   this title value    added  value     console log title      render        return                        lt form className  form-horizontal  gt                               lt input type  text  className  form-control  ref  input   gt  this title   input  name  title    gt                           lt  form gt                       lt button type  button  onClick  this onSubmit  className  btn  gt Save lt  button gt

User · Answer

You should use constructor under the class MyComponent extends React Component  constructor props       super props       this onSubmit   this onSubmit bind this         Then you will get the result of title

User · Answer

This simplest way is to use arrow function Your code with arrow functions export default class MyComponent extends React Component    onSubmit    e    gt        e preventDefault        var title   this title      console log title      render        return                        lt form className  quot form-horizontal quot  gt                               lt input type  quot text quot  className  quot form-control quot  ref   c    gt  this title   c  name  quot title quot    gt                           lt  form gt                       lt button type  quot button quot  onClick  this onSubmit  className  quot btn quot  gt Save lt  button gt

[javascript] How to get the value of an input field using ReactJS?

Examples related to javascript

Examples related to reactjs