[英]React react-bootstrap - How do I close a modal window from an outside component
I am using versions:我正在使用版本:
react@16.8.6
react-bootstrap@1.0.0-beta.8
I have a simple modal component:我有一个简单的模态组件:
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;
This is intended to be open for longer running activities (like login).这旨在为长时间运行的活动(如登录)打开。 I want to open it when the user clicks the login button and then close it when the login is complete.
我想在用户单击登录按钮时打开它,然后在登录完成后关闭它。 I am having difficulty finding a way to close it other than using a close button from inside the modal window:
除了使用模态 window 内部的关闭按钮外,我很难找到关闭它的方法:
<Button className="btn-block" variant="danger" onClick={this.props.onHide}>Close</Button>
This of course only allows the user to close it when they want.这当然只允许用户在需要时关闭它。 I have added an open and close method in the component that I would like to call from external components.
我在我想从外部组件调用的组件中添加了一个打开和关闭方法。
I have tried a number of things:我尝试了很多事情:
Adding an id, finding it using getElementById and then triggering the method.添加一个 id,使用 getElementById 找到它,然后触发该方法。
Adding a ref to the opening component as described here. 如此处所述,将 ref 添加到打开组件。
Doing it programmatically as described here. 按照此处所述以编程方式执行此操作。
I got some ideas from this question on how to call methods in other components. 我从这个问题中得到了一些关于如何在其他组件中调用方法的想法。
With all of that said, I still have no way to close the modal window automatically from outside the modal component itself.尽管如此,我仍然无法从模态组件本身外部自动关闭模态 window。
Here is what I ended up doing. 这就是我最终做的事情。 I couldn't get the 'ref' logic working so I ended up using a global reference in the constructor:
我无法使'ref'逻辑工作,所以我最终在构造函数中使用了全局引用:
window.progressModal = this;
I also needed to change the close code since the setting of the showModal state variable to false didn't do anything to close the modal window. 我还需要更改关闭代码,因为将showModal状态变量设置为false并没有执行任何操作来关闭模式窗口。 Setting showModal to true does open the window though:
将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();
}
Now external components can open the modal window using: 现在外部组件可以使用以下命令打开模态窗口:
window.progressModal.open();
and they can close it using: 他们可以使用以下方法关闭它:
window.progressModal.close();
Actually, I used useRef
instead of using global reference I typically implemented the same scenario using this solution https://stackoverflow.com/a/71464748/1770571 and it works properly with me实际上,我使用
useRef
而不是使用全局引用我通常使用此解决方案https://stackoverflow.com/a/71464748/1770571实现相同的场景并且它适用于我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.