从 popover 内的按钮关闭 react bootstrap popOver 组件

Question

如何关闭反应功能组件中的反应 bootstrap 弹出窗口组件？目前我正在使用一个 hack，它使用 rootclose 方法关闭弹出窗口并在内部按钮上调用 body.click，但是我觉得这并不理想，react bootstrap 组件中是否有任何方式或方法或也许通过使用 refs 我可以实现这个目标？

************** 以下是我的组件现在的结构 *****

const setVisibility = (
<Popover id="popover-basic">
      <Popover.Body className="px-0">
        //code here
      </Popover.Body>
    </Popover>
  );

  const EditVisibility = () => (
    <OverlayTrigger
      trigger="click"
      placement="bottom-end"
      overlay={setVisibility}
      rootClose
    >
      //code here
    </OverlayTrigger>
  );

然后我在我的 React 功能组件的 return 方法中调用 EditVisibility 组件

Answer 1

请查看以下沙盒：https://codesandbox.io/s/close-popover-ytpze2

引入一个显示状态来控制 Popover。
在 Popover.Header 中，您可以定义关闭按钮并在单击时将显示状态设置为 false
编写一个回调函数，在单击按钮时切换 Popover（OverlayTrigger 的“onToggle”属性）

从 popover 内的按钮关闭 react bootstrap popOver 组件

closing react bootstrap popOver component from a button that is inside the popover

reactjs

react-bootstrap