调用材质用户界面对话框

Question

如何在Dialog上的删除图标onClick上调用材料UI onClick={deletePlayer(id)}？

我已经在modal/Dialog下添加了 Dialog.js 并导入到 Home 组件。

我添加了一个演示here

Answer 1

在Home组件中创建一个状态以处理对话框的可见性，单击时设置状态，并有条件地呈现AlertDialog：

const [openDialog, setOpenDialog] = useState(false);

...

const deletePlayer = id => e => {
  setOpenDialog(true);
};

...

return(
  ...

  {openDialog && (
    <AlertDialog isOpen={openDialog} setIsOpen={setOpenDialog} />
  )}

然后在AlertDialog组件中：

export default function AlertDialog(props) {
  const { isOpen, setIsOpen } = props;

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

  return (
    <div>
      <Dialog
        open={isOpen}
        onClose={handleClose}
  ...

工作示例：

Answer 2

简短回答：Forked CodeSandbox with working dialog

长答案：

首先，您需要将显示/关闭逻辑移出AlertDialog组件，并移至实际上触发模式显示的组件（在您的情况下为Home组件） 。这意味着您将收到open状态和onClose处理程序作为道具（连同playerId一起保存将被删除的播放器的ID）。因此，对话框组件的签名变为：

export default function AlertDialog({ open, onClose, playerId }) {
  return (
    <Dialog open={open} onClose={onClose} ...> ... </Dialog>
  );
}

在Home中，我们添加了逻辑来跟踪和设置对话框打开/关闭状态以及要删除的播放器ID的状态。我们通过useState完成此操作：

  const [deleteDialog, setDeleteDialog] = useState(false);
  const [playerId, setPlayerId] = useState("");

通过在播放器AlertDialog循环中添加<AlertDialog />，可以使 拥有与播放器一样多的map组件，但那样会多余只有一个模态有效（根据定义）。因此，您要做的就是将<AlertDialog />的单个实例放置在Home组件中。一个好的约定是将其放置在结束包围标记之前：

  return (
    <div className="App">
      .
      .
      .
      <AlertDialog
        open={deleteDialog}
        onClose={() => setDeleteDialog(false)}
        playerId={playerId}
      />
    </div>
  );

最后，在您的案例deletePlayer中，我们处理负责显示模式的处理程序。我们要做两件事：通过playerId状态变量设置要删除的玩家ID，并通过deleteDialog状态变量显示模式：

  const deletePlayer = id => e => {
    setPlayerId(id);
    setDeleteDialog(true);
  };