3

我OverlayTrigger有trigger='hover'。当我将光标移出弹出框时，此处的预期行为将隐藏弹出框。但是，当我将光标移出按钮时，库会隐藏弹出窗口，即

<OverlayTrigger trigger='hover' placement='left' overlay={
  <Popover>
    ... content ...
  </Popover>
  }>
  <Button bsStyle='default'>name</Button>
</OverlayTrigger>

所以，当光标离开弹出内容的按钮时（例如，如果我想点击那里的链接）它就会消失。

有什么解决方案吗？

4

1 回答 1

1

我刚刚开始学习 React。我对此的解决方案是将触发选项设置为"manual"，并添加onMouseOver={fn}和onMouseOut={fn}以手动显示和隐藏 PopOver 内容。这是我的示例代码：

var popOver_timer;
var Pop = React.createClass({
  mixins: [TimerMixin],
  mouseOverhandler: function() {
    this.clearTimeout(popOver_timer);
    this.refs.pop.show();
  },
  mouseOuthandler: function() {
    popOver_timer = this.setTimeout(
      ()=> {this.refs.pop.hide();},
      50
    );
  },
  render: function() {
    return (
      <div onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>     
        <OverlayTrigger ref="pop" placement="bottom" trigger="manual" container={document.body} overlay={
          <Popover onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
            <a href="/">This Page</a>
          </Popover>}>
          <a href={this.props.popUsrUrl}>
            <button>PopOver</button>
          </a>
        </OverlayTrigger>
      </div>
    );
  }
});

除了 react-boostrap，我还需要 react-time-mixin 并使用 react-setTimeout。这是因为当您的鼠标从按钮移动到弹出框内容时，会先触发 onMouseOut，然后再触发 onMouseOver。因此，应该设置 onMouseOut 的时间延迟。我将其设置为 50 毫秒。希望能帮助到你。

于 2015-06-18T07:48:57.997 回答