时间戳

首页 > 解决方案 > 如何在handleSubmit 中打开一个对话框？

reactjs - 如何在handleSubmit 中打开一个对话框？

问题描述

我有一个看起来像这样的 handleSubmit 组件： File.tsx File.tsx

export default function SimpleDialog() {
const handleSubmit = (event: any) => {
  <SimpleDialog />;
}
return(
<form>
  <Button type="submit"> Save</Button>
</form>
)
}

我有另一个名为 SimpleDialog.tsx 的文件

export default function SimpleDialog() {
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = (value: string) => {
    setOpen(false);
  };
  return (
    <div>
      {" "}
      <Dialog open={open} onClose={handleClose} />{" "}
    </div>
  );
}

当我单击保存按钮时，我想打开我的对话框。我无法打开我的对话框。我该怎么做？

标签： reactjstypescriptmaterial-uimodal-dialog

解决方案

您只能通过从功能组件返回 JSX 来呈现它。任何回调都不是有效的地方。

在这种情况下，你真的想SimpleDialog保持状态是否打开。对话框是愚蠢的，只需要显示内容，而其他一些组件将管理该对话框，并告诉该做什么以及何时以及显示什么。

所以在handleSubmit你想设置一些状态，然后对你渲染的状态做出反应。

例如，首先使用一些可用于跟踪是否应显示对话框的状态：

const [showingDialog, setShowingDialog] = useState(false)

然后在 中handleSubmit，设置该状态：

const handleSubmit = () => setShowingDialog(true)

showDialog最后，如果是，则渲染您的对话框true：

return (
  <div>
    { showDialog && <SimpleDialog /> }
    ...Other Content...
  </div>
)

您可能希望更改您的对话框以接受一个函数作为应该关闭对话框时调用的道具。这将使您可以执行以下操作以再次关闭对话框。

<SimpleDialog onClickOk={() => setShowingDialog(false)} />

推荐阅读