react-bootstrap - React-bootstrap 弹出窗口在内容悬停时关闭

Question

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

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

因此，当光标离开弹出窗口内容上的按钮时(例如，如果我想单击那里的链接)，它就会消失。

有什么解决办法吗？

Answer 1

我刚刚开始学习 React。我对此的解决方案是将 trigger 选项设置为 "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。这是因为当你的鼠标从按钮移动到popover内容时，会先触发onMouseOut，然后是onMouseOver。因此，onMouseOut 应该设置一个延时。我将它设置为 50 毫秒。希望对您有所帮助。