ReactJS onChange事件處理程序

我有這樣的一個組成部分，與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長度提醒字符串

我在這裏做錯了什麼？我應該如何解決它？

來源

2015-10-07 necroface

使用這樣，

JS：

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

工作Jsbin

來源

2015-10-07 11:30:01

我認爲這與狀態處理裏面的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 (...) 
}

來源

2015-10-07 10:36:18 zvona

Praveen Raj的答案絕對是正確的選擇。下面是我從official React website發現爲什麼你要訪問this.state回調中，而不是之後的setState（）的文檔：

的setState（）不會立即發生變異this.state而造成掛起狀態轉變。調用此方法後訪問this.state可能會返回現有值。

來源

2015-11-18 14:05:56 Cheng

ReactJS onChange事件處理程序

回答

相關問題