React Bootstrap - 如何手动关闭 OverlayTrigger

Question

我有一个包裹了 Popover 的 OverlayTrigger，里面包含一些表单输入和一个用于保存数据并关闭的 Button。

save(e) {
  this.setState({ editing: false })
  this.props.handleUpdate(e);
}

render() {
    return (
      <OverlayTrigger trigger="click"
        rootClose={true}
        onExit={this.save.bind(this) }
        show={this.state.editing}
        overlay={
            <Popover title="Time Entry">
              <FormGroup>
                    <ControlLabel>Data: </ControlLabel>
                    <FormControl type={'number'}/>
              </FormGroup>
              <Button onClick={this.save.bind(this) }>Save</Button>
           </Popover>
        }>

我的 rootClose = true，并且我的回调函数在 onExit 时执行，但我没有看到手动关闭覆盖层的方法。我试图使用 Bootstrap Modal 中的 show 属性，但不起作用。

- Todd Chambery

Answer 1

在OverlayTrigger中，Hide功能不是公共功能。设置<OverlayTrigger rootClose={true}...然后在您的onClick事件触发器调用document.body.click()即可。

- NJ U

---

非常聪明。好答案。 - Brendan Turner

当弹出窗口关闭时，我需要设置一个标志。它是否有一个关闭事件，我可以监听并在回调中设置我的标志？ - Rahul Yadav

当您有嵌套的工具提示打开时，这不是解决方案。 - Shrihari Balasubramani

Answer 2

在 <OverlayTrigger ref="overlay"... 元素中添加一个引用（ref），并在元素被渲染后调用 hide 方法。尚未测试，但应该可以工作：

this.refs.overlay.hide();

- Igorsvee

---

我们有指令尽可能避免使用 ref，但这个确实很好用。 - Todd Chambery

我现在无法测试，但应该可以工作，因为API仍然包含隐藏方法[https://github.com/react-bootstrap/react-bootstrap/blob/v0.30.7/src/OverlayTrigger.js#L221]，或者您可以尝试使用此方法[https://github.com/react-bootstrap/react-bootstrap/blob/v0.30.7/src/OverlayTrigger.js#L213]。 - Igorsvee

针对 React 16，.hide() 是可以使用的，但语法略有不同。我需要使用 <OverlayTrigger ref={(ref) => this.overlay = ref}> 然后调用 this.overlay.hide();。 - dst3p

在函数式组件中，应该是ref.current.hide()对吧？ - coding_Lover

函数式组件中的 ref.current.hide() 不起作用。 - skyshine

Answer 3

如果有人正在寻找一种没有“关闭”按钮的解决方案，而是想在第二次单击时关闭它，那么这里就是答案：

    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <a tabindex="0">Some text</a>
    </OverlayTrigger>

- szikael

Answer 4

我用以下代码解决了这个问题：

import React from "react";
import ReactDOM from "react-dom";
import {
  Container,
  Popover,
  OverlayTrigger,
  Button,
  Row,
  Col
} from "react-bootstrap";

// Styles
import "bootstrap/dist/css/bootstrap.css";

const PopoverCustom = () => {
  let ref = React.useRef(null);

  const popover = (
    <Popover id="popover-basic">
      {/* <Popover.Title as="h3">Popover right</Popover.Title> */}
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
        <div className="mt-3 mb-1">
          <Button
            onClick={() => ref.handleHide()}
            size="sm"
            variant="outline-dark"
            className="pt-0 pb-0"
          >
            Hide Popover
          </Button>
        </div>
      </Popover.Content>
    </Popover>
  );

  return (
    <OverlayTrigger
      ref={r => (ref = r)}
      container={ref.current}
      trigger="click"
      placement="auto"
      overlay={popover}
      rootClose
    >
      <Button variant="dark">Show popover</Button>
    </OverlayTrigger>
  );
};

function App() {
  return (
    <Container className="ml-5 mt-5">
      <Row>
        <Col className="offset-sm-2" sm={8}>
          <PopoverCustom />
        </Col>
      </Row>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

- Junaid Atari