javascript - 如何使用 React-Responsive-Modal 在一个页面上创建多个模式
问题描述
我最近安装了 React-Responsive-Modal 库,它确实有效,但是我想在一页上创建多个模式。对于每个按钮,我单击打开它自己独特的模式。
我尝试以不同的方式命名状态并将这些不同的状态作为道具传递给按钮和模式,但它似乎仍然不起作用。
这是代码:
const [open, setOpen] = useState(false);
const [open2, setOpen2] = useState(false);
const onOpenModal = () => setOpen(true);
const onCloseModal = () => setOpen(false);
const onOpenModal2 = () => setOpen(true);
const onCloseModal2 = () => setOpen(false);
return (
<div className='cards'>
<div>
<button onClick={onOpenModal}>Open modal</button>
<Modal open={open} onClose={onCloseModal} center>
<h2>Simple centered modal</h2>
<p>
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
hendrerit risus, sed porttitor quam.
</p>
</Modal>
</div>
<div>
<button onClick={onOpenModal2}>Open modal</button>
<Modal open={open2} onClose={onCloseModal2} center>
<h2>Simple centered modal</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
hendrerit risus, sed porttitor quam.
</p>
</Modal>
</div>
</div>
);
另外,当我使用这种方法时,即使我单击第二个按钮,也只会出现第一个模式
解决方案
推荐阅读
- c# - 如何在 C# 中使用 XRM?
- javascript - 如果在数组中找到,则将新属性添加到对象
- linux - 未能启动 TerminalEmulator 类别的首选应用程序?
- android - 如何在 Kotlin 中使用 getExternalStorageDirectory?
- python - 每个键具有多个值的字典,按其中一个值排序
- angular - 即使在添加 formsModule 和 ReactiveFormsModule 之后,ngModel 也不起作用
- mingw - 尝试为 Windows 10 安装 mingw c++ 编译器时出现错误
- python - 作为两个列表之间的差异给出的矩阵
- python - 如何获得 20 个最大的词频?
- vb.net - 我该如何更正 ExecuteNonQuery