ReactJS onChange event handler

Question

I've got some confusion with React's event handler

I have a component like this, with handleChange handling onChange event:

var SearchBar = React.createClass({
    getInitialState(){
        return {word:''};
    },
    handleChange: function(event){
        this.setState({word:event.target.value});
        alert(this.state.word);
    },
    render: function () {
        return (
            <div style={{width:'100%',position:'0',backgroundColor:'darkOrange'}}>
                <div className="header">
                    <h1>MOVIE</h1>
                </div>
                <div className="searchForm">
                    <input className="searchField" onChange={this.handleChange}
                        value={this.state.word} type="text" placeholder="Enter search term"/>
                </div>
            </div>
        );
    }
});

It does work, but not the way I expect. In textfield, when I type the first character, it alerts empty string, when the second character is typed, it alerts a string with only first character, and so on, with string length of n, it alerts the string with n-1 length

What did I do wrong here? How should I fix it?

Praveen Raj · Accepted Answer · 2015-10-07 12:10:29Z

2

Use like this,

Js:

   this.setState({word:event.target.value}, function() {
    alert(this.state.word)
   });

Working Jsbin

edited Oct 7, 2015 at 12:10

answered Oct 7, 2015 at 11:30

Praveen Raj

1,0141 gold badge8 silver badges12 bronze badges

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

Comments

Samuli Hakoniemi · Accepted Answer · 2015-10-07 10:36:18Z

1

I think it has something to do with state handling inside React.

I can come with two options to handle it.

Either:

handleChange: function(event) {
  this.setState({word: event.target.value});
  window.setTimeout(function() {
    alert(this.state.word);
  }.bind(this));
}

Or:

alertCurrentValue() {
  alert(this.state.word);
},
render: function () {
  this.alertCurrentValue();
  return ( ... )
}

answered Oct 7, 2015 at 10:36

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Comments

Cheng · Accepted Answer · 2015-11-18 14:05:56Z

0

Praveen Raj's answer is definitely the right way to go. Here is the documentation I found from the official React website on why you should access this.state inside the callback rather than right after setState():

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

answered Nov 18, 2015 at 14:05

Cheng

18.1k23 gold badges77 silver badges106 bronze badges

Collectives™ on Stack Overflow

ReactJS onChange event handler

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related