twitter-bootstrap - React Bootstrap 弹出窗口在外部点击时关闭

Question

ReactBootstrap 提供了一个弹出控件。我希望在单击弹出窗口外部时将其忽略，其方式与模态的工作方式类似(它只是默认情况下单击开箱即用时将其忽略)。

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

JSfiddle 弹出窗口: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>;
    }
});

Answer 1

不，您不需要任何自定义代码。只需包含 rootClose 属性即可。其在react bootstrap官方文档https://react-bootstrap.netlify.com/components/overlays/#overlays-api

<OverlayTrigger trigger='click' rootClose>
  ....
</OverlayTrigger>