React Bootstrap - 如何手动关闭 OverlayTrigger

Question

我有一个 OverlayTrigger 包装一个 Popover，它包含一些表单输入和一个 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 属性（可以预见）它不起作用。

Answer 1

向 <OverlayTrigger ref="overlay"... 元素添加一个 ref，并在呈现该元素后调用 hide 方法。还没有测试过，但应该可以工作：

this.refs.overlay.hide();

Answer 2

隐藏功能不是 OverlayTrigger 上的 public 功能。设置 <OverlayTrigger rootClose={true}... 然后在你的 onClick 事件触发调用 document.body.click().

Answer 3

如果有人正在寻找没有 "close" 按钮的解决方案，而是 -> 第二次单击此处关闭它是：

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

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

React Bootstrap - 如何手动关闭 OverlayTrigger

React Bootstrap - How to manually close OverlayTrigger

twitter-bootstrap

reactjs

react-bootstrap