我对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长度的字符串

我在这里做错了什么?我应该如何解决?

最佳答案

这样使用

Js:

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


工作Jsbin

关于javascript - ReactJS onChange事件处理程序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32987355/

10-12 12:20
查看更多