[解決済み] reactのsetStateメソッドを呼んでも、すぐにステートが変更されないのはなぜですか？

質問

今読んでいる本 フォーム のセクションは reactjs のドキュメントを読んで、次のコードを試してみました。 onChange 使用法 ( JSBIN ).

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/> の値は、ブラウザ上で2番目の console.log の中にある handleChange コールバックは同じ value 最初の console.log の結果が表示されないのはなぜですか？ this.setState({value: event.target.value}) のスコープで handleChange をコールバックするのですか？

解決方法は？

Reactの ドキュメント :

setState() はすぐに変異しない this.state を作成しますが の状態遷移を保留する。アクセスする this.state を呼び出した後、この メソッドは既存の値を返す可能性があります。また の呼び出しが同期的に動作することを保証するものではありません。 setState と呼ばれることがあります。 は、パフォーマンス向上のためにバッチ処理されます。

状態変化が発生した後に実行される関数が必要な場合は、コールバックとして渡します。

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});