javascript - 映射数据呈现多个 Material-UI Dialog 组件

Question

我在表格中显示用户列表。每行都有一个单元格，其中包含一个用于删除用户的按钮。单击删除按钮时，我正在渲染 Material-UI <Dialog /> component确认。

问题是 map 导致呈现 3 个对话框，最后一个在最上面。因此，如果数组中有 3 个用户，则会呈现 3 个对话框，但您只能与第 3 个对话框交互(它会阻止其他 2 个对话框可见)。

问题类似于 this one.

有没有办法控制打开哪个对话框？

handleDeleteUser是一个发出请求的异步函数，所以我需要传递 id和 links到那个方法。

我有一个简化的 codesandbox here .如果您尝试删除用户 1 或用户 2，您会看到控制台中只显示用户 3 的 ID 和链接。

const handleDeleteUser = (id, links) => {
  // this always prints the id and links for the last user in the table
  console.log("deleting user -->", id);
  console.log("user delete URL", links.self);
  setOpen(false);
};

<Table.Body>
  {userList && userList.length >= 1 ? (
    userList.map(
      ({ id, attributes, links, i }, index) => {
        return (
          <Table.Row key={index}>
            <Table.Cell textAlign="center">
              <Button
                circular
                icon
                size="mini"
                color="red"
                type="button"
                onClick={handleClickOpen}
              >
                <Icon name="delete" />
              </Button>
              <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
              <DialogTitle id="alert-dialog-title">
                {"Confirm User Delete"}
              </DialogTitle>
              <DialogContent>
                <DialogContentText id="alert-dialog-description">
                  {`Are you sure you want to delete this user?`}
                </DialogContentText>
              </DialogContent>
              <DialogActions>
                <MUIButton
                  type="button"
                  onClick={handleDeleteUser.bind(
                    this,
                    id,
                    links
                  )}
                  color="primary"
                >
                  Yes
                </MUIButton>
                <MUIButton
                  type="button"
                  onClick={handleClose}
                  color="primary"
                  autoFocus
                 >
                   Cancel
                </MUIButton>
              </DialogActions>
            </Dialog>

Answer 1

您遇到的问题是，当按下触发模式的按钮时，它会将状态设置为打开状态，并且所有对话框都共享此

您要做的是将 Dialog 组件移动到另一个文件并从那里导入它，然后将点击处理程序和状态作为 Prop 传递。

这是我的解决方案

第一步

将触发模式打开的按钮和对话框组件移动到不同的文件中

import React, { useState } from "react";

import { Button, Icon } from "semantic-ui-react";

import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

import MUIButton from "@material-ui/core/Button";

const CustomDialog = (props) => {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button
        circular
        icon
        size="mini"
        color="red"
        type="button"
        onClick={() => handleClickOpen()}
      >
        <Icon name="delete" />
      </Button>

      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {"Confirm User Delete"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {`Are you sure you want to delete this user: ${props.id}?`}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <MUIButton
            type="button"
            onClick={() => {
              props.handleDeleteUser(props.id, props.links);
              setOpen(false);
            }}
            color="primary"
          >
            Yes
          </MUIButton>
          <MUIButton
            type="button"
            onClick={handleClose}
            color="primary"
            autoFocus
          >
            Cancel
          </MUIButton>
        </DialogActions>
      </Dialog>
    </>
  );
};
export default CustomDialog;

第二步

我像这样重构了你的表格组件

                    <React.Fragment key={index}>
                        <Table.Row key={index}>
                          <Table.Cell textAlign="center">
                            <CustomDialog
                              id={id}
                              links={links}
                              handleDeleteUser={handleDeleteUser}
                            />
                          </Table.Cell>
                          <Table.Cell>{id}</Table.Cell>
                        </Table.Row>
                      </React.Fragment>

如您所见，我已将 id 和 links 以及 handleDeleteUser 作为 props 传递，这样您就可以让对话框拥有自己的状态而不是共享状态，因此您没有得到想要的结果

你可以在这里预览codesandbox

提示

最好将每个组件放在不同的文件中，这样更干净，您可以轻松调试可能出现的问题