React Material Ui 对话框未显示正确的值

Question

我正在尝试使用 React material ui 对话框，但我发现了一个问题，或者我做错了。我有一个对象 a，当我单击列表中的 a 按钮时，它应该显示相应的 ID 号，但它始终显示最后一个 ID、索引的 ID 号，这是什么问题？是不是因为我在循环调用它们并且同时调用了所有三个对话框？我应该怎么做才能基本上显示每个按钮的相应 ID。 ...

export default function AlertDialog() {
  const [open, setOpen] = React.useState(false);
  
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];

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

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

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={handleClickOpen}>
                {id}
              </ListItem>
              <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}

... 我的样本 https://codesandbox.io/s/material-demo-k5s8k?file=/demo.js

Answer 1

正在打开所有 3 个对话框，因为您正在使用同一个打开变量控制所有 3 个对话框。最后一个对话框只是最上面的那个。如果您通过浏览器开发人员工具查看 DOM，您会看到所有 3 个都在那里。

您可以通过管理打开状态来解决此问题，方法是让您知道哪个 ID 处于打开状态。

一种方法是将打开的对话框的 ID 设置为状态：

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { List, ListItem } from "@material-ui/core";

export default function AlertDialog() {
  const [openId, setOpenId] = React.useState(null);
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];
  const handleClickOpen = id => {
    setOpenId(id);
  };

  const handleClose = () => {
    setOpenId(null);
  };

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={() => handleClickOpen(id)}>
                {id}
              </ListItem>
              <Dialog
                open={openId === id}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}

React Material Ui 对话框未显示正确的值

React Material Ui Dialog not Displaying Correct Values

javascript

reactjs

material-design

material-ui