当 opening/closing Popover 时，React Bootstrap 状态不会持续

Question

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

Live Example of the issue。要复制：单击按钮，单击 link，注意文本如何从 "State: Off" 变为 "State: On"。关闭弹出窗口（点击旁边的按钮或重新点击按钮），然后重新点击按钮打开弹出窗口。请注意文本是如何显示 "State: Off" 的。状态没有持久化（不说"State: On"）。

知道如何使状态在 closing/reopening 弹出窗口之间持续存在吗？

'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 是否打开，它都可以持续存在。然后我们只需将点击处理程序和状态作为道具传递给 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')
  );

当 opening/closing Popover 时，React Bootstrap 状态不会持续

React Bootstrap state does not persists when opening/closing Popover

reactjs

react-jsx

react-bootstrap