get input value in react failed?

Question

Tried to get input's value when user click search but failed.

var Login = React.createClass({
  getInitialState: function () {
    return {name: ''};
  },
  handleSearch(){
    alert(this.state.name); // doesn't work?
  },
  handleChange(e){
    this.setState({name: e.target.value});
  },
  render() {
    return <div>
      <input type="text" placeholder="name" onChange="{this.handleChange}" value=""/><button onClick={this.handleSearch}>Search</button>
    </div>;
  }
})

is there any more straight forward to get the value of input?

T.J. Crowder · Accepted Answer · 2016-12-20 09:55:38Z

4

The principal issue is that you have quotes around your onChange:

onChange="{this.handleChange}"

it shouldn't have them, that's setting it to a string value. Just:

onChange={this.handleChange}

(as you did with onClick on the button).

You'll also need to set value to this.state.name:

var Login = React.createClass({
  getInitialState: function () {
    return {name: ''};
  },
  handleSearch(){
    console.log("name is", this.state.name);
  },
  handleChange(e){
    this.setState({name: e.target.value});
  },
  render() {
    return <div>
      <input type="text" placeholder="name" onChange={this.handleChange} value={this.state.name} /><button onClick={this.handleSearch}>Search</button>
    </div>;
  }
});

ReactDOM.render(
  <Login />,
  document.getElementById("react")
);

<div id="react"></div>
<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>

edited Dec 20, 2016 at 9:55

answered Dec 20, 2016 at 9:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

T.J. Crowder Over a year ago

@NatelyJamerson: How does that relate to this question?

Nately Jamerson Over a year ago

it doesn't but can you please take a look? :D

T.J. Crowder Over a year ago

@NatelyJamerson: I'm afraid not. I don't use CodePen, and I don't (directly) use RequireJS, so I wouldn't be much help.

Collectives™ on Stack Overflow

get input value in react failed?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related