twitter-bootstrap – ReactBootstrap popover在外面点击时关闭

发布时间：2020-12-17 20:39:32 所属栏目：安全来源：网络整理

导读：ReactBootstrap提供了一个弹出控件.我希望在弹出窗口外部以与模态工作方式类似的方式解除此问题(默认情况下只需单击开箱即可解除). 有没有办法使用ReactBootstrap来做到这一点,还是我需要自定义代码？ JSfiddle of a popover：http://jsfiddle.net/226cwe4e/

ReactBootstrap提供了一个弹出控件.我希望在弹出窗口外部以与模态工作方式类似的方式解除此问题(默认情况下只需单击开箱即可解除).

有没有办法使用ReactBootstrap来做到这一点,还是我需要自定义代码？

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!