How to get input text value on click in ReactJS

Question

I am learning ReactJS and I want to understand how to get the input text values in ReactJS using simple onclick event  I have followed there tutorial and although i am able to get the parameter of text input  But somehow i am not able to get its value   I know this is a dumb question  but i am struggling with this   Please check my code and let me know what s wrong with it   var MyComponent   React createClass     handleClick  function         if  this refs myInput     null            var input   this refs myInput              var inputValue   input value        alert  Input is   inputValue                render  function         return          lt div gt           lt input type  text  ref  myInput    gt           lt input           type  button            value  Alert the text input            onClick  this handleClick            gt         lt  div gt                  ReactDOM render     lt MyComponent   gt     document getElementById  container        Here is jsfiddle for the same   jsfiddle link

User · Accepted Answer

First of all  you can t pass to alert second argument  use concatenation instead   alert  Input is     inputValue     Example  However in order to get values from input better to use states like this   x000D   x000D  var MyComponent   React createClass   x000D    getInitialState  function      x000D      return   input        x000D       x000D   x000D    handleChange  function e    x000D      this setState   input  e target value     x000D       x000D   x000D    handleClick  function     x000D      console log this state input   x000D       x000D   x000D    render  function     x000D      return   x000D         lt div gt  x000D           lt input type  text  onChange   this handleChange     gt  x000D           lt input x000D            type  button  x000D            value  Alert the text input  x000D            onClick  this handleClick  x000D            gt  x000D         lt  div gt  x000D         x000D      x000D      x000D   x000D  ReactDOM render  x000D     lt MyComponent   gt   x000D    document getElementById  container   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  container  gt  lt  div gt  x000D   x000D   x000D

User · Answer

There are two ways to go about doing this    Create a state in the constructor that contains the text input  Attach an onChange event to the input box that updates state each time  Then onClick you could just alert the state object  handleClick  function         alert this refs myInput value

[reactjs] How to get input text value on click in ReactJS

Examples related to reactjs