reactjs - ポップオーバーの開閉時に React Bootstrap の状態が保持されない

Question

React Bootstrapを使用していますが、OverlayTrigger/Popover の使用中に問題が発生しています。ポップオーバーを閉じて再度開くと、状態<ComponentWithState />が破棄されます。

問題の実例。複製するには: ボタンをクリックし、リンクをクリックして、テキストが「状態: オフ」から「状態: オン」にどのように変化したかを確認します。ポップオーバーを閉じて (横をクリックするか、ボタンを再クリック)、ボタンを再クリックしてポップオーバーを開きます。テキストに「状態: オフ」と表示されていることに注目してください。状態が持続しませんでした (「状態: オン」とは言いません)。

ポップオーバーを閉じる/再開する間、状態を持続させる方法を考えていますか?

'use strict';

var React = require('react');
var Popover = require('react-bootstrap/lib/Popover');
var Button = require('react-bootstrap/lib/Button');
var OverlayTrigger = require('react-bootstrap/lib/OverlayTrigger');

var ComponentWithState = React.createClass({
  getInitialState: function() {
    return {
      value: false
    };
  },

  changeToTrue: function(e) {
    e.preventDefault();
    this.setState({value: true});
  },

  render: function() {
    return (
      <div>
        <div><a href="#" onClick={this.changeToTrue}>Change state to On</a></div>
        <div>State: {this.state.value ? 'On' : 'Off'}</div>
      </div>
    );
  }
});

var App = React.createClass({
  render: function() {
    var children = (
      <Popover title="Something">
        <ComponentWithState />
      </Popover>
    );

    return (
      <OverlayTrigger trigger="click" rootClose overlay={children}>
        <Button>Options</Button>
      </OverlayTrigger>
    );
  }
});

React.render(
  <App />,
  document.getElementById('container')
);