我有一张用户表。对于每个用户,我希望能够弹出一个对话框以便能够为用户编辑数据。目前的基本结构如下:
{
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
应该做相当于 a 的事情new Dialog(parameters)
,并让它处理所有事情。我正在努力思考以正确的方式来处理这个问题。我开始沿着布尔数组的道路走下去,open
但很快就陷入了困境。
作为参考,我已经尝试过,material-ui-confirm
但我需要一个表单,并且该库似乎最适合“您确定”类型的对话框。
有人能指出我正确的方向吗?其他多种编程语言和环境都没有打败我,但 ReactJS / Typescript 确实对我有用。
您可能正在寻找的是 React Provider 模式。
这个 npm 包广告中有一个很好的例子,它已经为您编写了提供程序和钩子
https://www.npmjs.com/package/mui-modal-provider
要点是将 React 应用程序包装在提供程序中,然后您可以从应用程序中的任何位置调用模态/组件,而无需在每个组件中创建和配置新实例,也无需能够管理一个实例的状态全球。
了解有关 useContext 和 Providers 的更多信息
https://legacy.reactjs.org/docs/context.html https://react.dev/reference/react/useContext