如何使用onclick (react)从其他组件激活模态

Question

需要使用onClick函数在其他组件上激活模态组件。

使用bootstrap -react模式

import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import { useState } from 'react';
const UserModal=()=> {
const [smShow, setSmShow] = useState(false);

return (
<>
<Button onClick={() => setSmShow(true)} className="me-2">Small modal</Button>
<Modal
size="sm"
show={smShow}
onHide={() => setSmShow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header closeButton>
<Modal.Title id="example-modal-sizes-title-sm">
Small Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>...</Modal.Body>
</Modal>
</>
);
}
export default UserModal

模态组件得到按钮，但我需要他的功能在其他组件。模式应该在onclick函数和if语句之后打开。

谢谢!

Answer 1

您可以通过参数获取其状态来解决这个问题。而不是插入到组件中。这样你就可以以一种更简单的方式重用它。

示例:https://codesandbox.io/embed/goofy-khorana-tdnmow?fontsize=14& hidenavigation = 1,黑暗主题=

ps:在这个例子中，我把按钮留在了组件中，但理想情况下，它应该在调用它的地方使用。

Answer 2

将data-bs-toggle="modal" data-bs-target="#example-modal-sizes-title-sm"属性添加到按钮上，如果单击该按钮，则会激活modal

Answer 3

这是我的bootstrap Modal的html代码

<div className="modal fade" id="navSearchModal" tabIndex="-1" aria-labelledby="navSearchModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<button type="button" className="ms-auto rounded-circle modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
<i className="fa-solid fa-xmark"></i>
</button>
<h5 className="modal-title text-center" id="navSearchModalLabel">Search for Products</h5>
<input className="navbar-search-input my-3 w-100 px-2 py-2 rounded-pill" type="text" placeholder="Search..." />
<div className='search-modal-results'></div>
</div>
</div>
</div>
</div>

这个按钮当点击时激活模态

<button className="navbar-search-btn" type="submit" data-bs-toggle="modal" data-bs-target="#navSearchModal">
<i className="fa-solid fa-magnifying-glass"></i>
</button>