我在构建webapp时遇到了这个问题,并在jsfiddle中复制了它。本质上,this.setState({message: input_val})每次输入内容时,我都希望调用一个输入,然后将其传递到父App类中,然后将其重新呈现到Message类中。但是输出似乎总是比我实际输入的内容落后一步。jsfiddle演示应该可以自我解释。我想知道我是否做错了任何提示。
this.setState({message: input_val})
html
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script> <div id='app'></div>
js
var App = React.createClass({ getInitialState: function() { return {message: ''} }, appHandleSubmit: function(state) { this.setState({message: state.message}); console.log(this.state.message); }, render: function() { return ( <div className='myApp'> <MyForm onChange={this.appHandleSubmit}/> <Message message={this.state.message}/> </div> ); } }); var MyForm = React.createClass({ handleSubmit: function() { this.props.onChange(this.state); }, handleChange: function(e) { console.log(e.target.value); this.setState({message: e.target.value}); this.handleSubmit(); }, render: function() { return ( <form className="reactForm" onChange={this.handleChange}> <input type='text' /> </form> ); } }); var Message = React.createClass({ render: function() { return ( <div className="message"> <p>{this.props.message}</p> </div> ) } }); React.render( <App />, document.getElementById('app') );
呼叫setState不同步。它创建一个“待处理状态转换”。(有关更多详细信息,请参见此处)。您应该input在引发事件的过程中显式传递新值(例如handleSubmit您的示例中)。
setState
input
handleSubmit
请参阅此示例。
handleSubmit: function(txt) { this.props.onChange(txt); }, handleChange: function(e) { var value = e.target.value; this.setState({message: value}); this.handleSubmit(value); },