onClick 事件打开所有 Material-UI 对话框

Question

I am trying to do a simple employee "rolodex" and want it to display employee information when they click on the card via Material-UIs dialog modals. When I click on any one ALL dialog boxes open and not just the one I want. Here's what I got:

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>

Thanks in advance for any help/suggestions!

Answer 1

You will need a different piece of state to track which employee is selected:

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>

I just assumed you had id on employee record, but another unique field could be used. Having a single boolean and using it would set all of the modals open as you experienced. By storing the employee Id (or other unique field) that is clicked, you can use that to decide which of the modals should be opened.