ReactJS OnChange обработчик события

Question

У меня есть путаница с React обработчиков событий

У меня есть компонент, как это, с handleChange обработки onChange событие:

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

Это делает работу, но не так, как я ожидать. В текстовом поле, когда я набираю первый символ, он предупреждает пустую строку, когда набирается второй символ, он предупреждает строку с только первым символом и т. Д. С длиной строки n, она предупреждает строку с длиной n-1

Что я здесь сделал неправильно? Как его исправить?

Answer 1

использования, как это,

Js:

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

Jsbin Рабочая

Answer 2

Я думаю, что это имеет какое-то отношение к управлению состоянием внутри React.

Я могу использовать два варианта для его обработки.

Либо:

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

Или:

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

Answer 3

Ответ Правеена Раджа - это, безусловно, правильный путь. Вот документация я нашел из official React website о том, почему вы должны получить доступ к this.state внутри обратного вызова, а не сразу после SetState():

SetState() не сразу мутировать this.state но создает отложенный переход состояния , Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.