14

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>;
    }
});
4

5 回答 5

53

不，您不需要任何自定义代码。只需包括rootClose道具，这对你有用。它在 react bootstrap 官方文档https://react-bootstrap.netlify.com/components/overlays/#overlays-api

<OverlayTrigger trigger='click' rootClose>
  ....
</OverlayTrigger>
于 2017-12-08T12:53:48.320 回答
3

对于 React Bootstrap 4.4，有必要在onHide旁边添加一个函数rootClose，这些属性也适用于OverlayComponent（不是OverlayTrigger）。

这是一个例子：

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  const handleClick = (event) => {
    setShow(!show);
  };

  return (
    <div ref={ref}>
      <Button onClick={handleClick} ref={target}>Holy guacamole!</Button>

      <Overlay
        show={show}
        target={target.current}
        placement="bottom"
        rootClose
        onHide={() => setShow(false)}
      >
        <Popover id="popover-contained">
          <Popover.Title as="h3">Popover bottom</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      </Overlay>
    </div>
  );
}

render(<Example />);
于 2020-05-18T14:49:01.433 回答
2

我认为这应该适合你：

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

于 2015-03-09T20:01:50.187 回答
2

除了@makuno 的回答。如果您希望弹出框在弹出框内的点击时保持打开状态并在弹出框外的点击时关闭，您可以使用以下命令

<OverlayTrigger trigger='click' rootClose>
    <div onClick={e => {
        e.stopPropagation(); 
        e.preventDefault(); 
        e.nativeEvent.stopImmediatePropagation();
    }}>
        Click me, I won't dismiss the popover
    </div>  
....
</OverlayTrigger>

这里要注意的关键是e.nativeEvent.stopImmediatePropagation()声明

于 2020-09-28T17:27:00.527 回答
0

以上都不适合我。这对我有用。我不得不rootCloseEvent="mousedown"与rootClose={true}

<OverlayTrigger
          rootClose={true}
          rootCloseEvent="mousedown"
          trigger="click"
          placement="left"
          overlay={
            <div className="delete--team cursor-pointer">
              some text
            </div>
          }
        >
于 2021-12-30T12:43:17.750 回答