我正在阅读reactjs文档的Forms部分,只是尝试了这段代码来演示用法(JSBIN)。
onChange
var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') );
当我<input/>在浏览器中更新值时,回调console.log内的第二个与第一个handleChange相同,为什么在回调范围内看不到结果?value``console.log``this.setState({value: event.target.value})``handleChange
<input/>
console.log
handleChange
value``console.log``this.setState({value: event.target.value})``handleChange
从React的文档中:
setState()不会立即变异,this.state但会创建待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。无法保证对呼叫的同步操作,setState并且可以为提高性能而对呼叫进行批量处理。
setState()
this.state
setState
如果要在状态更改后执行函数,请将其作为回调传递。
this.setState({value: event.target.value}, function () { console.log(this.state.value); });