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事件处理程序

回答

相关问题