如何使用 React-Responsive-Modal 在一个页面上创建多个模式

Question

我最近安装了 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>

);

另外，当我使用这种方法时，即使我单击第二个按钮，也只会出现第一个模式

Answer 1

你在这一行有一个错误

const onOpenModal2 = () => setOpen(true);

它应该是

const onOpenModal2 = () => setOpen2(true);

所以这就是为什么第二个没有打开。 你也有同样的错误 onCloseModal2