How to get input text value on click in ReactJS

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>

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


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>

Tags:

Reactjs

Recent Posts