Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get input text value on click in ReactJS

Tags:

reactjs

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 (       <div>         <input type="text" ref="myInput" />         <input           type="button"           value="Alert the text input"           onClick={this.handleClick}         />       </div>     );   } });  ReactDOM.render(   <MyComponent />,   document.getElementById('container') ); 

Here is jsfiddle for the same : jsfiddle link

like image 595
Rajat Vij Avatar asked Jul 18 '16 18:07

Rajat Vij


People also ask

How do you get the input type text value in react?

To get the value of an input field in React:Use event. target. value to get the input field's value and update the state variable.

How do you show text on click in react?

If you want to display it in an alert window, you need to call a function to trigger the window. However, if you need to show the message in your render, you can use a state to manage that. If you need to toggle the text on button click, you just need to update the onButtonClickHandler function to this.

How do you give a value to an input tag in react?

To get the value of an input on button click in React: Declare a state variable that tracks the value of the input field. Add an onClick prop to a button element. When the button is clicked, update the state variable.


2 Answers

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

var MyComponent = React.createClass({    getInitialState: function () {      return { input: '' };    },      handleChange: function(e) {      this.setState({ input: e.target.value });    },      handleClick: function() {      console.log(this.state.input);    },      render: function() {      return (        <div>          <input type="text" onChange={ this.handleChange } />          <input            type="button"            value="Alert the text input"            onClick={this.handleClick}          />        </div>      );    }  });    ReactDOM.render(    <MyComponent />,    document.getElementById('container')  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="container"></div>
like image 177
Oleksandr T. Avatar answered Sep 28 '22 22:09

Oleksandr T.


There are two ways to go about doing this.

  1. 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.

  2. handleClick: function() { alert(this.refs.myInput.value); },

like image 43
erichardson30 Avatar answered Sep 28 '22 22:09

erichardson30