Reactjs 调用材质ui对话框

如何在删除图标ie

onClick={deletePlayer（id）}

上的

onClick

过程中调用材质UI

对话框

我已经在

modal/Dialog

下添加了Dialog.js并导入到主组件中

---

我添加了一个演示

在

主页

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

警报对话框

：

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

...

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

...

return(
  ...

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

工作示例：

---

在

主页

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

警报对话框

：

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

...

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

...

return(
  ...

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

工作示例：

简短回答：

长答覆：

首先，您需要将显示/取消逻辑移出

AlertDialog

组件，并移入实际触发模式显示的组件（在您的情况下，是

Home

组件）。这意味着您将收到

open

状态和

onClose

处理程序作为道具（以及

playerId

，它将保存要删除的玩家的ID）。因此，对话框组件的签名变为：

导出默认函数AlertDialog（{open，onClose，playerId}）{
返回(
... 
);
}

在

Home

中，我们添加了跟踪和设置对话框打开/关闭状态以及要删除的播放器ID的逻辑。我们通过

useState

来实现这一点：

const[deleteDialog，setDeleteDialog]=useState（false）；
const[playerId，setPlayerId]=useState（“”）；

通过在播放器

映射
循环中添加
，您可以拥有与播放器一样多的
AlertDialog
组件，但这是多余的，因为您只有一个模式处于活动状态（根据定义）。因此，您所要做的就是将
的单个实例放在
主组件中。一个好的约定是将其放置在结束包围标记之前：

返回(
.
.
.
setDeleteDialog（false）}
playerId={playerId}
/>
);

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

constdeleteplayer=id=>e=>{
setPlayerId（id）；
setDeleteDialog（true）；
};
简短回答：

长答覆：

首先，您需要将显示/取消逻辑移出
AlertDialog
组件，并移入实际触发模式显示的组件（在您的情况下，是
Home
组件）。这意味着您将收到
open
状态和
onClose
处理程序作为道具（以及
playerId
，它将保存要删除的玩家的ID）。因此，对话框组件的签名变为：

导出默认函数AlertDialog（{open，onClose，playerId}）{
返回(
... 
);
}

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

const[deleteDialog，setDeleteDialog]=useState（false）；
const[playerId，setPlayerId]=useState（“”）；

通过在播放器
映射
循环中添加
，您可以拥有与播放器一样多的
AlertDialog
组件，但这是多余的，因为您只有一个模式处于活动状态（根据定义）。因此，您所要做的就是将
的单个实例放在
主组件中。一个好的约定是将其放置在结束包围标记之前：

返回(
.
.
.
setDeleteDialog（false）}
playerId={playerId}
/>
);

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

constdeleteplayer=id=>e=>{
setPlayerId（id）；
setDeleteDialog（true）；
};
保持显示对话框的状态。在单击事件时设置状态创建状态
const[open，setOpen]=useState（false）
并在click事件中
constdeleteplayer=id=>e=>{alert（“删除此播放器数据！”）；setOpen（{show:true}）；}
您应该在deletePlayer中调用
setOpen（true）
。保持一个状态以显示对话框。在单击事件时设置状态创建状态
const[open，setOpen]=useState（false）
并在click事件中
constdeleteplayer=id=>e=>{alert（“删除此播放器数据！”）；setOpen（{show:true}）；}
您应该在deletePlayer中调用
setOpen（true）
。谢谢您，托马斯，如果我需要通过axios调用服务器，
const res=wait axios.delete（）http://localhost:8000/service/player/${id}'）
我应该在
deletePlayer
或Dialog.js中实现它吗？因为它应该在对话框中的Yes上触发…这是正确的。有两种方法可以解决这个问题：要么直接在对话框中执行它，要么在“Yes”按钮内的onClick处理程序中执行它，使用作为道具传递的playerId，或者创建一个带有签名的
onDelete
处理程序，如
const-onDelete=id=>（）=>{axios.delete（…）；setDeleteDialog（false）；}
，将其作为带有目标id（
）的属性传递给对话框