React Bootstrap - 如何手动关闭 OverlayTrigger [英] React Bootstrap - How to manually close OverlayTrigger

问题描述

我有一个 OverlayTrigger 包装了一个 Popover，其中包含一些表单输入和一个 Button 来保存数据并关闭.

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

我有 rootClose = true，并且我的回调被执行 onExit，但我没有看到手动关闭叠加层的方法.我正在尝试使用 Bootstrap Modal 中的 show 属性，该属性(可预测)不起作用.

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.

推荐答案

向 <OverlayTrigger ref="overlay"... 元素添加 ref 并调用 hidecode> 方法，一旦元素被渲染.尚未测试，但应该可以工作:

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

这篇关于React Bootstrap - 如何手动关闭 OverlayTrigger的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！