React Bootstrap - 如何手动关闭OverlayTrigger

时间:2016-07-19 20:24:02

标签: twitter-bootstrap reactjs react-bootstrap

我有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 show中的Modal属性(可预测)无法正常工作。

4 个答案:

答案 0 :(得分:24)

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

this.refs.overlay.hide();

答案 1 :(得分:17)

隐藏功能不是OverlayTrigger上的公共功能。设置onClick,然后设置document.body.click()事件触发器调用provider "aws" { access_key = "xxx" secret_key = "xxx" region = "sa-east-1" } resource "aws_vpc" "main" { cidr_block = "10.0.0.0/16" } resource "aws_internet_gateway" "igw" { vpc_id = "${aws_vpc.main.id}" tags { Name = "igw" } } resource "aws_subnet" "main" { vpc_id = "${aws_vpc.main.id}" cidr_block = "10.0.1.0/24" tags { Name = "Main" } depends_on = [ "aws_internet_gateway.igw" ] } resource "aws_security_group" "ssh" { name = "ssh" description = "(Proxy) Allow SSH" vpc_id = "${aws_vpc.main.id}" ingress { from_port = 22 to_port = 22 protocol = "tcp" cidr_blocks = ["0.0.0.0/0"] } egress { from_port = 0 to_port = 0 protocol = "-1" cidr_blocks = ["0.0.0.0/0"] } } resource "aws_instance" "proxy" { ami = "ami-286f2a44" instance_type = "t2.micro" key_name = "spkeypar" subnet_id = "${aws_subnet.main.id}" security_groups = ["${aws_security_group.ssh.id}"] associate_public_ip_address = false } resource "aws_eip" "pib" { instance = "${aws_instance.proxy.id}" vpc = true } output "ip" { value = "${aws_eip.pib.public_ip}" }

答案 2 :(得分:0)

如果某人正在寻找没有“关闭”按钮的解决方案,而是->在第二次单击时将其关闭,则为:

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

答案 3 :(得分:0)

我用以下代码解决了这个问题:

fn pass_fn(get_num: &dyn Fn() -> i32) {
    let _num = get_num();
}

fn pass_fn_mut(set_num: &mut dyn FnMut(i32)) {
    set_num(6);
}

fn pass_fn_once(do_thing: Box<dyn FnOnce()>) {
    do_thing();
}

fn main() {
    pass_fn(&|| 2);

    let mut x = 1;
    pass_fn_mut(&mut |y| x = y);

    pass_fn_once(Box::new(|| println!("Hello!")));
}

Edit React-Bootstrap Popover Dismiss