MUI 对话框 - 无法将 onClose 传递给 onClick 内部对话框操作

Question

我正在尝试基于 MUI 对话框创建可重用的Dialog组件。

这是我的代码：

import React from 'react';
import {
  Dialog as MuiDialog,
  DialogProps,
  Button,
  DialogContent,
  DialogActions,
  DialogTitle,
} from '@material-ui/core';

const Dialog = ({ title, open, onClose, children, ...props }: DialogProps) => {

  return (
    <MuiDialog
      onClose={onClose}
      aria-labelledby='simple-dialog-title'
      open={open}
    >
      <DialogTitle id='simple-dialog-title'>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={onClose} color='primary'>
          Close
        </Button>
      </DialogActions>
    </MuiDialog>
  );
};

它一直在<Button onClick={onClose} color='primary'>处显示错误

错误：

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; disableFocusRipple?: boolean | undefined; ... 5 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined' is not assignable to type 'MouseEventHandler<HTMLAnchorElement> | undefined'.
      Type '(event: {}, reason: "backdropClick" | "escapeKeyDown") => void' is not assignable to type 'MouseEventHandler<HTMLAnchorElement>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; onClick: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined; color: "primary"; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.
      Type '(event: {}, reason: "backdropClick" | "escapeKeyDown") => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.  TS2769

    22 |       <DialogContent>{children}</DialogContent>
    23 |       <DialogActions>
  > 24 |         <Button onClick={onClose} color='primary'>
       |         ^
    25 |           Close
    26 |         </Button>
    27 |       </DialogActions>

在这里我使用对话框

const SimpleDialogDemo = () => {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value: string) => {
    setOpen(false);
  };

  return (
    <div>
      <br />
      <Button variant='outlined' color='primary' onClick={handleClickOpen}>
        Open simple dialog
      </Button>
      <Dialog open={open} onClose={handleClose} children={<div>Test</div>} />
    </div>
  );
}

Answer 1

你只需要这样做：

<Button onClick={() => onClose()} color='primary'>
  Close
</Button>

这是为了避免在onClose上传递event道具，因为您的道具不接受该event 。

并删除您无用的value参数：

  const handleClose = () => {
    setOpen(false);
  };

Answer 2

从文档中，这是来自Dialog的onClose道具的签名：

(event: object, reason: string) => void

这是Button的onClick回调签名：

(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void

这里的问题是您将第一个参数作为字符串传递的函数会导致Button的类型错误。 从您的handleClose函数定义来看，您似乎希望收到关闭原因，您可以通过扩展DialogProps类型来实现：

import {
  Dialog as MuiDialog,
  DialogProps as MuiDialogProps
} from '@material-ui/core';

type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
type DialogProps = {
  onClose: (reason: CloseReason) => void;
} & MuiDialogProps;

然后更新handleClose参数类型：

const handleClose = (value: CloseReason) => {
  setOpen(false);
};

并在Dialog和Button像这样传递它：

<MuiDialog onClose={(_, reason) => onClose(reason)}

<Button onClick={() => onClose('closeButtonClick')}