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

它确实有效，但不是我期望的方式。在textfield中，当我键入第一个字符时，它会警告空字符串，当键入第二个字符时，它会警告只有第一个字符的字符串，依此类推，字符串长度为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

Praveen Raj的回答绝对是正确的方法。以下是我从official React website中找到的关于为什么要在回调中访问this.state而不是在setState（）之后的文档：

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

ReactJS onChange事件处理程序

3 个答案: