Javascript 无法从 React 表格​​行中的按钮触发 Modal

Modal组件需要在页面中具有由父级控制的visibleprops (而不是作为函数调用).这CoreUI examples for CModal个对于您的用例来说有点误导.我建议在父Users组件中使用useState，并为Close事件向Modal传递一个setter回调.

例如:

Users.js

const Users = () => {
  const [visible, setVisible] = React.useState(false);
  const [selectedUser, setSelectedUser] = React.useState(null);

  const rows = [
    { userID: "1", firstName: "Cameron", lastName: "E" },
    { userID: "2", firstName: "Steve", lastName: "G" }
  ];

  return (
    <>
      <CTable>
        {rows.map((row) => {
          return (
            <CTableRow v-for="item in tableItems" key={row.userID}>
              <CTableDataCell className="text-center">
                {row.userID}
              </CTableDataCell>
              <CTableDataCell>{row.firstName}</CTableDataCell>
              <CTableDataCell>
                <div>{row.lastName}</div>
              </CTableDataCell>
              <CTableDataCell className="column-overflow">
                {row.email}
              </CTableDataCell>
              <CTableDataCell>{row.role}</CTableDataCell>
              <CTableDataCell>{row.createdAt}</CTableDataCell>
              <CTableDataCell>{row.updatedAt}</CTableDataCell>

              <CTableDataCell>
                <strong>{row.lastLogin}</strong>
              </CTableDataCell>
              <CTableDataCell>
                <CDropdown>
                  <CDropdownToggle color="transparent">
                    Dropdown button
                  </CDropdownToggle>
                  <CDropdownMenu>
                    <CDropdownItem className="dropdown-item pointer">
                      View
                    </CDropdownItem>
                    <CDropdownItem className="dropdown-item pointer">
                      Edit
                    </CDropdownItem>

                    <CDropdownItem
                      className="dropdown-item text-danger pointer"
                      onClick={() => {
                        setSelectedUser(row);
                        setVisible(true);
                      }}
                    >
                      Delete
                    </CDropdownItem>
                  </CDropdownMenu>
                </CDropdown>
              </CTableDataCell>
            </CTableRow>
          );
        })}
      </CTable>
      <Modal
        visible={visible}
        user={selectedUser}
        onClose={() => setVisible(false)}
      />
    </>
  );
};

莫达尔.js莫达尔.js

const Modal = ({ visible, onClose, user }) => {
  return (
    <>
      <CModal visible={visible} onClose={onClose}>
        <CModalHeader onClose={onClose}>
          <CModalTitle>Delete {user.firstName}?</CModalTitle>
        </CModalHeader>
        <CModalBody>
          Are you sure you want to delete {user.firstName}? (He's a good guy.)
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={onClose}>
            Yeah he is a good guy
          </CButton>
          <CButton color="primary">Nuke 'Em!</CButton>
        </CModalFooter>
      </CModal>
    </>
  );
};

Note:作为额外的好处，我添加了一个将所选用户传递给Modal的示例，以便页面中只有Modal组件的一个实例.

Working CodeSandbox: https://codesandbox.io/s/cold-leftpad-l5ivqy?file=/src/莫达尔.js莫达尔.js

Users.js Rendered

莫达尔.js莫达尔.js Rendered