调用材质 ui 对话框答案

【问题标题】：Call a material ui dialog调用材质 ui 对话框
【发布时间】：2020-06-03 11:01:30
【问题描述】：

如何在 onClick 在删除图标上调用 Material UI Dialog ，即 onClick={deletePlayer(id)} ？

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

我已经添加了一个演示here

【问题讨论】：

保持状态以显示对话框。设置点击事件的状态
创建了一个状态const [open, setOpen] = useState(false);并在点击事件内部const deletePlayer = id => e => { alert("Delete this player data ! "); setOpen({ show: true }); };
你应该在 deletePlayer 中调用setOpen(true)。

标签： reactjs material-ui react-hooks

【解决方案1】：

简答：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("");

虽然您可以通过在播放器 map 循环中添加 <AlertDialog /> 来拥有与播放器一样多的 AlertDialog 组件，但这是多余的，因为你只会拥有一个模态活跃（根据定义）。所以你所要做的就是在你的Home 组件中放置一个<AlertDialog /> 的实例。一个好的约定是将它放在关闭的包含标签之前：

  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);
  };

【讨论】：

谢谢 Thomas，我可以再问一个问题，如果我需要通过 axios 调用服务器，const res = await axios.delete('http://localhost:8000/service/player/${id}'); 我应该在 deletePlayer 或 Dialog.js 中实现它吗？因为它应该在对话框上被触发...是正确的。
有两种方法可以解决这个问题：或者直接在“是”按钮onClick处理程序内的Dialog中实现它，使用作为道具传递的playerId，或使用const onDelete = id => () => { axios.delete(...); setDeleteDialog(false); } 之类的签名制作onDelete 处理程序，将其作为带有目标ID (<AlertDialog onDelete={onDelete(playerId)} .../>) 的prop 传递给对话框，并将其用作“是”按钮的处理程序(<Button onClick={onDelete}>Yes</Button>) .使用后者，您可能会决定不再需要 playerId 属性。
我忘了提到第二种方法中描述的onDelete 处理程序应该位于Home 内部（因为它作为道具传递给您的对话框组件）。

【解决方案2】：

在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}
  ...

工作示例：

【讨论】：