React Bootstrap - 如何手动关闭OverlayTrigger

Tod*_*ery 15 twitter-bootstrap reactjs react-bootstrap

我有一个包含OverlayTriggera 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>
        }>
Run Code Online (Sandbox Code Playgroud)

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

Igo*_*vee 27

<OverlayTrigger ref="overlay"...元素添加引用,hide并在呈现元素后调用该方法.没有测试它但应该工作:

this.refs.overlay.hide();
Run Code Online (Sandbox Code Playgroud)

  • 对于React 16,`.hide()`可以工作,但是语法不同。我不得不使用`&lt;OverlayTrigger ref = {(ref)=&gt; this.overlay = ref}&gt;`,然后调用`this.overlay.hide();`。 (2认同)
  • 对于功能组件 ref.current.hide() 不起作用 (2认同)

Noa*_*cab 19

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

  • 非常聪明.好答案. (3认同)
  • 当您打开嵌套工具提示时,这不是解决方案 (2认同)