私はウェブアプリの構築中にこの問題に遭遇し、これを再現しましたjsfiddle基本的に、入力するたびに入力を呼び出しthis.setState({message: input_val})
、それを親 App クラスに渡して、メッセージを Message クラスに再レンダリングするようにしたいのですが、出力は常に実際に入力したものより 1 ステップ遅れているようです。jsfiddle のデモを見れば一目瞭然です。何か間違ったことをしてこのメッセージが表示されてしまったのではないかと思っています。
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')
);
ベストアンサー1
の呼び出しは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);
},