React-buraprap popover解除內容懸停

我有OverlayTrigger與trigger='hover'。當我將光標移出它時，預期的行爲就是隱藏popover。然而，庫藏酥料餅當我移動光標移出按鈕，即React-buraprap popover解除內容懸停

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

所以，當光標出來酥料餅的內容按鈕（如果我想點擊的鏈接有例如）消失。

任何解決方案？

來源

2015-05-01 Igor Loskutov

我剛剛開始學習React。我到該溶液中是設置觸發選項爲「手動」，並添加的onMouseOver = {fn}上跳動和的onmouseout = {fn}上跳動手動顯示和隱藏酥料餅含量。下面是我的示例代碼：

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> 
 
    ); 
 
    } 
 
});

除了反應，自舉，我還需要反應時間，混入，並使用反應-的setTimeout。這是因爲當你的鼠標從按鈕移動到彈出內容時，首先觸發onMouseOut，然後觸發onMouseOver。因此，應設置onMouseOut的時間延遲。我將它設置爲50毫秒。希望能幫助到你。

來源

2015-06-18 07:48:57

React-buraprap popover解除內容懸停

回答

相關問題