如何只打开被点击的模态

Posted 2023-03-23

【中文标题】如何只打开被点击的模态

【英文标题】：How to open just only the modal which is clicked

【发布时间】：2021-04-02 23:55:50

【问题描述】：

我正在使用 React 和 Firebase 制作 CRUD 网站。

我使用 reactstrap 制作了一个表格，并尝试使用 modal 来显示每个表格单元格的内容。

但是，我遇到了一个错误，即只需单击一个即可打开每个表格单元格的模式。

enter image description here

如果您查看上面的图片，您可以检查有几个表格单元格。一旦我单击一个，它就像下图一样。打开每一个模态。

enter image description here

我只会把我的代码放在那些模态部分。

...

  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);
  
  ...
  
<td>
  <Button color="primary" onClick=toggle>내용 보기</Button>
    <Modal isOpen=modal modalTransition= timeout: 700  backdropTransition= timeout: 1300  toggle=toggle>
      <ModalHeader toggle=toggle>value.name</ModalHeader>
        <ModalBody>
          value.description
        </ModalBody>
    </Modal>
</td>

我认为我应该使用 value.id 来仅显示我点击的模式，因为它必须是具体的。所以我尝试了一些更改，但没有成功。

【参考方案1】：

你应该稍微修改一下你的结构 const [modals, setModals] = useState();

modals 应该是值 id 的对象（所以它将是值 id 和 bool 的对象） 所以

  1: true,
  2: false,

你应该重写 jsx 代码 onClick=() => toggle(value.id) 和 isOpen=modals[value.id]

我看不到你的完整代码，所以无法编写你在代码中使用的正确变量，但在这里你应该能够得到想法

你也可以使用 modalId 作为状态

const [modalId, setModalId] = useState(-1); 并在切换功能中更新状态中的新 id