我正在阅读reactjs文档的表单部分,并尝试用这段代码演示onChange
usage(JSBIN)
var React=require('React');
var ControlledForm=React.createClass({
getInitialState:函数(){
返回{
值:“初始值”
};
},
handleChange:函数(事件){
console.log(this.state.value);
this.setState({value:event.target.value});
console.log(this.state.value);
},
render:function(){
返回(
<;input type=“text”value={this.state.value}onChange={this.handleChange}/>;
);
}
});
反应(
<;ControlledForm/>;,
document.getElementById('mount')
);
当我更新时<;输入/>值在浏览器中,
handleChange
回调中的第二个console.log
打印与第一个console.log
相同的value
,为什么我在handleChange
回调的范围内看不到this.setState({value:event.target.value})的结果
从React的文档中:
setState()
不会立即改变此.state,但会创建一个
等待状态转换。调用此函数后访问此.state
方法可能返回现有值。没有
保证对setState
的调用和调用的同步操作
为提高性能而进行批处理
如果希望在状态更改发生后执行函数,请将其作为回调传入
this.setState({value:event.target.value},函数(){
console.log(this.state.value);
});