onClick 事件打開所有 Material-UI 對話框

Question

我正在嘗試做一個簡單的員工“rolodex”，並希望它在他們通過 Material-UIs 對話框模式單擊卡片時顯示員工信息。 當我單擊任何一個時，所有對話框都會打開，而不僅僅是我想要的。 這是我得到的：

const [isModalOpen, setIsModalOpen] = useState(false);

const openModal = () => {
  setIsModalOpen(true);
}

const closeModal = () => {
  setIsModalOpen(false);
}

<Grid continer>
  {employees && employees.map(e => (
    <Grid item md={4}>
      <Card onClick={openModal}>
        <CardContent>
          <p>{e.name}</p>
        </CardContent>
      </Card>
    </Grid>

    <Dialog
      open={isModalOpen}
      onClose={closeModal}
    >
      <DialogTitle>{e.name}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          <p>Department: {e.department}</p>
          <p>Phone: {e.phone}</p>
          <p>Email: {e.email}</p>
        </DialogContentText>
      </DialogContent>
    </Dialog>
  ))}
</Grid>

提前感謝您的任何幫助/建議！

Answer 1

您將需要另一塊 state 來跟蹤選擇了哪個員工：

const [selectedEmployee, setSelectedEmployee] = useState(null);

const openModal = (employeeId) => {
  setSelectedEmployee(employeeId);
}

const closeModal = () => {
  setSelectedEmployee(null);
}

<Grid continer>
  {employees && employees.map(e => (
    <Grid item md={4}>
      <Card onClick={() => openModal(e.id)}>
        <CardContent>
          <p>{e.name}</p>
        </CardContent>
      </Card>
    </Grid>

    <Dialog
      open={selectedEmployee === e.id}
      onClose={closeModal}
    >
      <DialogTitle>{e.name}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          <p>Department: {e.department}</p>
          <p>Phone: {e.phone}</p>
          <p>Email: {e.email}</p>
        </DialogContentText>
      </DialogContent>
    </Dialog>
  ))}
</Grid>

我只是假設您在員工記錄上有id ，但可以使用另一個唯一字段。 擁有一個 boolean 並使用它會將所有模態設置為您所經歷的打開狀態。 通過存儲單擊的員工 ID（或其他唯一字段），您可以使用它來決定應打開哪些模式。