Question

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

Live Example of the issue。要复制：单击按钮，单击链接，注意文本如何从“State：Off”更改为“State：On”。关闭弹出窗口（单击旁边或重新单击按钮），然后重新单击按钮以打开弹出窗口。注意文本如何说“State：Off”。国家没有坚持（不说“国家：开”）。

了解如何在关闭/重新打开popover之间保持状态？

'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再次运行。

您可能想要做的是将状态移动到应用程序组件，以便无论是否打开Overlay，它都可以保持不变。然后我们将click处理程序和状态作为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')
  );

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

1 个答案: