[英]React react-bootstrap - How do I close a modal window from an outside component
我正在使用版本:
react@16.8.6
react-bootstrap@1.0.0-beta.8
我有一个简单的模态组件:
import React, { Component } from 'react'
import { Modal } from "react-bootstrap";
import { ProgressBar } from "react-bootstrap";
class ProgressModal extends Component {
constructor(...args) {
super(...args);
this.state = { showModal: false, titleText: ((this.props.titletext === undefined || this.props.titletext === null || this.props.titletext === "") ? "Working..." : this.props.titletext)};
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open() {
this.setState({showModal: true});
}
close() {
this.setState({showModal: false});
}
render() {
return (
<Modal centered backdrop="static" keyboard={false} {...this.props}>
<Modal.Header>
<Modal.Title className="font-weight-bold">{this.state.titleText}</Modal.Title>
</Modal.Header>
<Modal.Body>
<ProgressBar animated striped now={100} />
</Modal.Body>
</Modal>
);
}
}
export default ProgressModal;
这旨在为长时间运行的活动(如登录)打开。 我想在用户单击登录按钮时打开它,然后在登录完成后关闭它。 除了使用模态 window 内部的关闭按钮外,我很难找到关闭它的方法:
<Button className="btn-block" variant="danger" onClick={this.props.onHide}>Close</Button>
这当然只允许用户在需要时关闭它。 我在我想从外部组件调用的组件中添加了一个打开和关闭方法。
我尝试了很多事情:
添加一个 id,使用 getElementById 找到它,然后触发该方法。
我从这个问题中得到了一些关于如何在其他组件中调用方法的想法。
尽管如此,我仍然无法从模态组件本身外部自动关闭模态 window。
这就是我最终做的事情。 我无法使'ref'逻辑工作,所以我最终在构造函数中使用了全局引用:
window.progressModal = this;
我还需要更改关闭代码,因为将showModal状态变量设置为false并没有执行任何操作来关闭模式窗口。 将showModal设置为true会打开窗口:
<Modal id={"progress-bar-modal-window"} show={this.state.showModal} centered backdrop="static" keyboard={false} {...this.props}>
open() {
this.setState({showModal: true});
}
close() {
this.props.onHide();
}
现在外部组件可以使用以下命令打开模态窗口:
window.progressModal.open();
他们可以使用以下方法关闭它:
window.progressModal.close();
实际上,我使用useRef
而不是使用全局引用我通常使用此解决方案https://stackoverflow.com/a/71464748/1770571实现相同的场景并且它适用于我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.