ReactBootstrap 弹出窗口在外部单击时关闭 [英] ReactBootstrap popover dismiss on click outside

问题描述

ReactBootstrap 提供了一个弹出控件.我希望以与模态工作方式类似的方式在弹出框外单击时取消此操作(默认情况下，它只是默认单击开箱即用).

ReactBootstrap provides a popover control. I would like this to be dismissed on clicking outside the popover in a similar way to how modals work (it just dismisses by default clicking out of the box).

有没有办法使用 ReactBootstrap 做到这一点，或者我需要自定义代码吗?

Is there a way to do this using ReactBootstrap or do I need to custom code something?

弹出框的 JSfiddle:http://jsfiddle.net/226cwe4e/

JSfiddle of a popover: http://jsfiddle.net/226cwe4e/

React.createClass({
    render: function() {
        return <ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={<ReactBootstrap.Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</ReactBootstrap.Popover>}>
        <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
      </ReactBootstrap.OverlayTrigger>;
    }
});

推荐答案

我认为这应该适合您:

const Hello = () => (
  <ReactBootstrap.OverlayTrigger 
    trigger="focus" 
    placement="bottom" 
    overlay={
      <ReactBootstrap.Popover title="Popover bottom">
        <strong>Holy guacamole!</strong> Check this info.   
      </ReactBootstrap.Popover>
    }
  >
    <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
  </ReactBootstrap.OverlayTrigger>
);

ReactDOM.render(<Hello />, document.getElementById('app'));

这里是 jsfiddle

这篇关于ReactBootstrap 弹出窗口在外部单击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！