React Bootstrap OverlayTriggerをクリックするとポップオーバーが点滅します

Question

ボタンの外側をクリックしてボタンをクリックすると、OverlayTriggerがPopoverを閉じることができるようにします。しかし、トリガーをtrigger = {['click'、 'focus']}に設定すると、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

Answer 1

OverlayTriggerでトリガーを使用しようとする人は、代わりにオーバーレイを使用してください。

OverlayTriggerコンポーネントは、ほとんどのユースケースのために素晴らしいですが、 より高いレベルの抽象化として、それはあなたのオーバーレイ成分に より微妙なまたはカスタム動作を構築するために必要な柔軟性を欠くことができます。 の場合は、トリガーを忘れてオーバーレイ コンポーネントを直接使用すると便利です。

• https://react-bootstrap.github.io/components.html#overlays
• https://react-bootstrap.github.io/react-overlays/#overlay