函数调用时打开模式
函数调用时打开模式
提问于 2019-11-26 18:37:05
我有一个带有函数示例的js文件。我在另一个函数中调用这个函数。我现在需要的是有我的模式打开没有点击按钮。它完美地工作在按钮点击，但这不是我需要在我的情况。任何解决方案如何在不单击此按钮的情况下在函数调用中显示此模式？
function Example() {
return (
<>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</>
);
}回答 3
Stack Overflow用户
发布于 2019-11-26 18:59:11
$("#exampleModal").modal('show');尝试在显示模式的函数中调用此函数。也不要忘了导入。jquery，然后调用此函数。您可以在主页中导入jquery，一切都将正常工作
Stack Overflow用户
发布于 2019-11-26 18:57:26
只需定义一个状态变量，让我们将其命名为showModal，使用false对其进行初始化，然后在代码中显示或隐藏基于showModal的模式为true或false。
这样，当您想要“手动”显示它时，您需要做的就是将该showModal切换为true，如下所示：
this.setState({showModal: true});您需要一些react知识才能理解我的答案:)
Stack Overflow用户
发布于 2019-11-26 19:50:05
我已经通过使用React Hooks解决了这个问题。感谢您的回复。Happy hacking :)
function Example() {
const [show, setShow] = useState(true);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59048984
复制相关文章
相似问题
腾讯云开发者
