我有一张用户表。对于每个用户,我希望能够弹出一个对话框以便能够为用户编辑数据。目前的基本结构如下:
{
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 确实对我有用。