内容悬停

Question

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

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

因此，当光标弹出内容上的按钮时（如果我想点击那里的链接），它就会消失。

任何解决方案吗？

Answer 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毫秒。希望它有所帮助。