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 (
      <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

Oleksandr T. · Accepted Answer · 2018-06-26 13:59:18Z

90

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>

edited Jun 26, 2018 at 13:59

answered Jul 18, 2016 at 18:13

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prabhat Doongarwal Over a year ago

Why should I update state for every change in input box? Shouldn't reading the value in input box on button click be easier?

Kaushal28 Over a year ago

What if my input is in separate component from my button?

Sean Over a year ago

@PrabhatDoongarwal I'm a total React noob, but I just came across this recommendation in the official react docs to use "controlled components" over "uncontrolled components"

erichardson30 · Accepted Answer · 2016-07-18 18:09:58Z

10

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); },

answered Jul 18, 2016 at 18:09

erichardson30

5,0548 gold badges29 silver badges47 bronze badges

1 Comment

brrystrw Over a year ago

what is the best option in this case?

Kashif Sulehria · Accepted Answer · 2022-03-15 08:28:27Z

1

It is Simple:

import {useState} from 'react';
 const[value, setValue] = useState(""); 
    function handle() {
        alert(value)
    }

<input value={value} onChange={(e) => {setValue(e.target.value)}} />
<button onClick={handle}>Button</button>

answered Mar 15, 2022 at 8:28

Kashif Sulehria

771 silver badge4 bronze badges

1 Comment

Matthew Over a year ago

This does work, but I want to leave a note because this can create additional renders that may not be expected. Using the useState hook, every time the state is changed the component is rendered again. If you have a lot of child elements, this side-effect may be more noticeable. See react.dev/reference/react/useState#returns

Collectives™ on Stack Overflow

How to get input text value on click in ReactJS

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related