React react-bootstrap - 如何从外部组件关闭模式 window
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 并没有对关闭模态执行任何操作 window。将 showModal 设置为 true 确实会打开 window 但是:
<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 使用:
window.progressModal.open();
他们可以使用以下方式关闭它:
window.progressModal.close();
其实我用的是useRef
而不是全局引用
我通常使用此解决方案 实现相同的场景,它对我来说工作正常
我使用的版本:
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 并没有对关闭模态执行任何操作 window。将 showModal 设置为 true 确实会打开 window 但是:
<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 使用:
window.progressModal.open();
他们可以使用以下方式关闭它:
window.progressModal.close();
其实我用的是useRef
而不是全局引用
我通常使用此解决方案