twitter-bootstrap React Bootstrap - 如何手动关闭 OverlayTrigger
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38467848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Bootstrap - How to manually close OverlayTrigger
提问by Todd Chambery
I have an OverlayTriggerwrapping a Popoverthat contains some form inputs and a Buttonto save the data and close.
我有一个OverlayTrigger包装 a Popover，其中包含一些表单输入和 aButton以保存数据并关闭。
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 showattribute from the Bootstrap Modalthat (predictably) doesn't work.
我有rootClose = true，并且我的回调被执行onExit，但我没有看到手动关闭叠加层的方法。我正在尝试使用showBootstrapModal中（可预见地）不起作用的属性。
回答by Igorsvee
Add a ref to the <OverlayTrigger ref="overlay"...element and call the hidemethod once the element has been rendered. Haven't tested it but should work:
向<OverlayTrigger ref="overlay"...元素添加 ref 并在元素hide呈现后调用该方法。还没有测试过，但应该可以工作：
this.refs.overlay.hide();
回答by Noah John Ucab
Hide function is not a public function on OverlayTrigger. Set <OverlayTrigger rootClose={true}...and then on your onClickevent trigger call document.body.click().
隐藏函数不是 OverlayTrigger 上的公共函数。设置<OverlayTrigger rootClose={true}...然后在您的onClick事件触发器上调用document.body.click()。
回答by szikael
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>
回答by Junaid Atari
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);
