我正在使用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')
);