React Bootstrap - How to manually close OverlayTrigger

问题

I have an OverlayTrigger wrapping a Popover that contains some form inputs and a Button to save the data and close.

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>
        }>

I have rootClose = true, and my callback gets executed onExit, but I don't see a way to manually close overlay. I'm trying to use the show attribute from the Bootstrap Modal that (predictably) doesn't work.

回答1:

Add a ref to the <OverlayTrigger ref="overlay"... element and call the hide method once the element has been rendered. Haven't tested it but should work:

this.refs.overlay.hide();

回答2:

Hide function is not a public function on OverlayTrigger. Set <OverlayTrigger rootClose={true}... and then on your onClick event trigger call document.body.click().

回答3:

If someone is searching for a solution without "close" button but rather -> close it on second click here it is:

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

回答4:

I solved this problem with the following code:

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

来源：https://stackoverflow.com/questions/38467848/react-bootstrap-how-to-manually-close-overlaytrigger

标签

twitter-bootstrap

reactjs

react-bootstrap