需要设计模式帮助 - 可重用对话框

Question

我有一张用户表。对于每个用户，我希望能够弹出一个对话框以便能够为用户编辑数据。目前的基本结构如下：

{
  header: 'Edit User',
  cell: (cell) => {
    return (
      <>
        <SimpleFormDialog dialogOpen={open}
                          onClose={handleClose}
                          firstName={cell.row.original.firstName}
                          lastName={cell.row.original.lastName}
                          email={cell.row.original.email}
                          enabled={cell.row.original.enabled}
        />
        <IconButton aria-label="edit">
          <EditOutlined onClick={handleClickOpen} />
        </IconButton>
      </>
    );
  }
},

SimpleFormDialog

看起来像：

const SimpleFormDialog = ({ onClose, dialogOpen, firstName, lastName, email, enabled }:
                            { onClose: () => void;
                              dialogOpen: boolean;
                              firstName?: string;
                              lastName?: string;
                              email?: string;
                              enabled?: boolean;
                            }) => {

  const handleClose = () => {
    onClose();
  };

  return (
    <React.Fragment>
      <Dialog

 ...

我面临的挑战是我的

SimpleFormDialog

现在在所有实例之间共享布尔值“open”。在此过程中，存在开放不一致的情况。此外，只有最后一个用户的信息才会填充到对话框中。

我的 ReactJS 与 MUI 经验充其量也非常薄弱。在我看来，按钮

onClick

应该做相当于

new Dialog(parameters)

的事情，并让它处理所有事情。我正在努力思考以正确的方式来处理这个问题。我开始沿着一系列布尔值的路径寻找

open

，但很快就陷入了困境。

作为参考，我已经尝试过

material-ui-confirm

，但我需要一个表单，并且该库似乎最适合“您确定”类型的对话框。

有人能指出我正确的方向吗？其他多种编程语言和环境都没有打败我，但 ReactJS / Typescript 肯定对我有用。

Answer 1

您可能正在寻找的是 React Provider 模式。

这个 npm 包广告中有一个很好的例子，它已经为你编写了提供者和钩子

https://www.npmjs.com/package/mui-modal-provider

import React from 'react';
import { createRoot } from 'react-dom/client';
import ModalProvider, { useModal } from 'mui-modal-provider';
import Dialog, { DialogProps } from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';

interface SimpleDialogProps extends DialogProps {
  title: string,
};

// Create the dialog you want to use
const SimpleDialog: React.FC<SimpleDialogProps> = ({ title, ...props }) => (
  <Dialog {...props}>
    <DialogTitle>{title}</DialogTitle>
  </Dialog>
);

// Use modal hook and show the dialog
const App = () => {
  const { showModal } = useModal();

  return (
    <Button
      variant="contained"
      onClick={() => showModal(SimpleDialog, { title: 'Simple Dialog' })}
      color="primary"
    >
      simple dialog
    </Button>
  );
};

const container = document.getElementById('root');
const root = createRoot(container);

// Wrap the app with modal provider
root.render(
  <ModalProvider>
    <App />
  </ModalProvider>
);

要点是将 React 应用程序包装在提供程序中，然后您可以从应用程序中的任何位置调用模态/组件，而无需在每个组件中创建和配置新实例，也无需管理组件的状态全局实例。

了解有关 useContext 和 Providers 的更多信息

https://legacy.reactjs.org/docs/context.html https://react.dev/reference/react/useContext