使用 React 更新行时的多模态打开

Question

我使用 React 和 Bootstrap Table 创建了一个项目。打开模态是有效的，但不幸的是 table 中的所有数据也打开了它们自己的模态。

例如，我在 table 中有 5 个数据，当更新一行时，其他四 (4) 个模态也会呈现和显示。

来自 Firestore 的数据的 ID 可供子组件访问 (Edit_Modal.tsx) 有没有办法为模态添加一个 ID 以引用数据？

Manuscript.jsx

              <tbody>
                {thesisData.map((doc, index) => {
                  return (
                    <tr key={doc.id}>
                      <td>{index + 1}</td>
                      <td>{doc.title}</td>
                      <td>
                        {doc.members[0]}, {doc?.members[1]}
                      </td>
                      <td>{doc.adviser}</td>
                      <td>{doc.course}</td>
                      <td>{doc.pages}</td>
                      <td className="m-1 text-center">
                        <Button
                          className="mb-1"
                          variant="secondary"
                          onClick={(e) => openUpdateModal(doc.id, e)}
                        >
                          <IconContext.Provider value={{ color: "#fff" }}>
                            <div>
                              <BsFillPencilFill />
                            </div>
                          </IconContext.Provider>
                          {showModalEdit && <Edit_Modal modalToggle={doc.id} />}
                        </Button>
                        <Button
                          className="mb-1"
                          variant="danger"
                          onClick={(e) => deleteHandler(doc.id)}
                        >
                          <IconContext.Provider value={{ color: "#fff" }}>
                            <div>
                              <BsFillTrashFill />
                            </div>
                          </IconContext.Provider>
                        </Button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>

openUpdateModal() 函数

  const openUpdateModal = (id) => {
    setThesisId(id);
    setShowModalEdit(true);
  };

Edit_Modal.tsx

const Edit_Modal = ({ modalToggle }) => {
  //Use States for Modal
  const [show, setShow] = useState(true);


  const handleClose = () => {
    setShow(!show);
  };

 return ReactDom.createPortal(
    <div>
      <Modal
        show={show}
        keyboard={false}
        onHide={handleClose}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Update Thesis Details
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form
            noValidate
            validated={validated}
            id="addFormId"
            onSubmit={handleUpdateForm}
          >
            <Row className="mb-3">
              <Form.Group as={Col} controlId="formGridTitle">
                <Form.Label>Title</Form.Label>
                <Form.Control
                  type="text"
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Enter title"
                  value={title}
                  required
                />
                <Form.Control.Feedback type="invalid">
                  Please enter a title.
                </Form.Control.Feedback>
              </Form.Group>

              <Form.Group as={Col} controlId="formGridAdviser">
                <Form.Label>Adviser</Form.Label>
                <Form.Control
                  type="text"
                  onChange={(e) => setAdviser(e.target.value)}
                  placeholder="Name of Adviser"
                  value={adviser}
                  required
                />
                <Form.Control.Feedback type="invalid">
                  Please enter an Adviser.
                </Form.Control.Feedback>
              </Form.Group>
            </Row>

            <Form.Group className="mb-3" controlId="formGridAbstract">
              <Form.Label>Abstract</Form.Label>
              <Form.Control
                as="textarea"
                onChange={(e) => setAbstract(e.target.value)}
                rows={3}
                placeholder="Enter Abstract Details"
                value={abstract}
                required
              />
              <Form.Control.Feedback type="invalid">
                Please enter Abstract Details.
              </Form.Control.Feedback>
            </Form.Group>
            <Button type="Submit">Add Content</Button>
          </Form>
        </Modal.Body>
      </Modal>
    </div>,
    document.getElementById("modal-root")
  );
};

export default Edit_Modal;

Answer 1

正如@adhinarayan 所说，您可以使用 setThesisId 的 useState 来获取文档的特定 ID。

使用状态示例：

const [thesisId, setThesisId] = useState("");

您可以使用openUpdateModal函数获取Modal和论文ID

      const openUpdateModal = (id) => {
        setThesisId(id); //useState for ID
        setShowModalEdit(true); //useState for Modal
};

最后，确保将模态组件放置在地图功能之外，以避免模态循环。您可以将 thesisId 设置为自定义属性 Edit_Modal

             ...</tbody>
        </Table>
        {showModalEdit && <Edit_Modal modalToggle={thesisId} />}
      </Col>...

使用 React 更新行时的多模态打开

Multiple Modal Opening when Updating a Row using React

javascript

reactjs

react-bootstrap

google-cloud-firestore