React--使用多个react-bootstrap模态显示数据的正确方法。

Question

为了努力学习 React.js 我创建了一个简单的应用程序来显示所有员工的个人数据，使用了 react-bootstrap. 但是有一个问题 Modal 但我还没有找到解决办法。问题是所有的数据都出现在 Modal 是最后一个员工数据，在本例中 employee-03.

在这里偷看一下代码（不是完整的代码）。https:/codesandbox.iospeaceful-wave-cjdo3

根据这一条。React-Bootstrap多模式我怀疑，似乎所有 Modal 使用相同的ID。我感到困惑的是，如何为每一个 Modal 如果以后要从JSON文件中检索员工数据？

谢谢。

Regards, Erol.

Answer 1

你是用同一个状态来切换所有的模态。如果你玩React的开发者工具，你可以看到每个modal都有它对应的数据。我会在状态中创建一个booleans数组或者一个 字符串:

  const [modalId, setModalId] = React.useState("");
  const handleClose = () => setModalId("");

  return (
    <Row className="App">
      {data.map((pax, i) => (
        <Col xs={12} md={4} key={pax.Uniquename}>
          <Card>
            <Card.Body>
              <Card.Title as="h4">{pax.Uniquename}</Card.Title>
              <Button type="button" onClick={() => setModalId(`modal${i}`)}>
                Open Modal
              </Button>
            </Card.Body>
            <Modal
              show={modalId === `modal${i}`}
              onHide={handleClose}
              aria-labelledby={`${pax.Uniquename}ModalLabel`}
              centered
            >
              <Modal.Header id={`${pax.Uniquename}ModalLabel`} closeButton>
                {pax.Uniquename}
              </Modal.Header>
              <Modal.Body>Full Name: {pax.Name}</Modal.Body>
            </Modal>
          </Card>
        </Col>
      ))}
    </Row>
  );

PS：这只是个例子，你可以重新思考你的系统。