打开/关闭 Popover 时，React Bootstrap 状态不会持续存在

Question

我正在使用React Bootstrap，但在使用 OverlayTrigger/Popover 时遇到了任何问题。当我关闭弹出窗口并重新打开它时，<ComponentWithState /> 的状态将被丢弃。

Live Example of the issue。要复制：单击按钮，单击链接，注意文本如何从“状态：关闭”变为“状态：打开”。关闭弹窗（点击旁边的按钮或重新单击按钮），然后重新单击按钮打开弹窗。请注意文本如何显示“状态：关闭”。状态没有持续存在（没有说“状态：开启”）。

知道如何使状态在关闭/重新打开弹出窗口之间保持不变？

'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')
);

Answer 1

如果我正确理解您的问题，那么我认为问题可能出在您保持状态的地方。

getInitialState 在组件首次创建时运行，并且只运行一次。因此，每次您再次单击该按钮时，您的 <ComponentWithState /> 都会被卸载并且状态会丢失。然后getInitialState 在我们再次点击按钮时重新运行（默认为 false）。

您可能想要做的是将状态移动到应用程序组件，以便无论 Overlay 是否打开，它都可以持续存在。然后我们只需将 click 处理程序和 state 作为 props 传递给 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({

    propTypes: {
      stateValue: React.PropTypes.boolean,
      onLinkClick: React.PropTypes.func
    },

    render: function() {
      var stateText = (this.props.stateValue) ? 'On' : 'Off';

      return (
        <div>
          <div><a href="#" onClick={this.props.onLinkClick}>Change state to On</a></div>
          <div>State: {stateText}</div>
        </div>
      );
    }
  });

  var App = React.createClass({

    getInitialState: function() {
      return {
        value: false
      };
    },

    render: function() {
      var children = (
        <Popover title="Something">
          <ComponentWithState onLinkClick={this.handleLinkClick} stateValue={this.state.value}/>
        </Popover>
      );

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

    handleLinkClick: function (event) {
      event.preventDefault();

      this.setState({value: !this.state.value});
    }
  });

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