單擊OverlayTrigger時React Bootstrap Popover閃爍

我希望OverlayTrigger能夠通過單擊按鈕外部並單擊該按鈕來關閉Popover。但是，當我將觸發器設置爲trigger = {['click'，'focus']}時，當點擊按鈕顯示它時，Popover會閃爍並消失。單擊OverlayTrigger時React Bootstrap Popover閃爍

getInitialState() { 
    return { show: true }; 
}, 

classificationPopover() { 
    return (
     <ReactBootstrap.Popover id="popover" title="Popover"> 
      Pop! 
     </ReactBootstrap.Popover> 
    ); 
}, 

render: function() { 
    return (
     <div> 

      <ReactBootstrap.OverlayTrigger 
       trigger={['click', 'focus']} // Here is probably the tricky part 
       placement="right" 
       overlay={this.classificationPopover()}> 
        <ReactBootstrap.Button 
         bsStyle="default" 
         className="btn btn-default btn-circle"> 
          <div className="btn-circle-text">?</div> 
        </ReactBootstrap.Button> 
      </ReactBootstrap.OverlayTrigger> 

     </div> 
    ) 
}

fiddle

當您單擊該按鈕外部，然後單擊該按鈕會出現這種情況。但是，如果你只是點擊按鈕並關閉彈出按鈕，事情工作正常。

我知道在OverlayTrigger中添加一個RootClose屬性，並保持「單擊」觸發器將工作，但對於我的工作要求，我不允許使用RootClose，所以我需要一個不同的解決方案。感謝：D

來源

2016-08-11 thousight

對於任何嘗試在OverlayTrigger中使用觸發器的人，請考慮使用Overlay。

的OverlayTrigger組件是非常適合大多數使用情況，但作爲一個更高的抽象層可以缺少建立更細緻或自定義行爲到您的覆蓋部件所需的靈活性。對於這些情況，放棄觸發器並直接使用Overlay 組件可能會有所幫助。

來源

2016-12-20 17:55:37

單擊OverlayTrigger時React Bootstrap Popover閃爍

回答

相關問題