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

Question

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

这是我的代码：

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

从文档onClose中，这是以下 prop的签名Dialog：

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

这是onClick来自以下的回调签名Button：

(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';

interface DialogProps extends MuiDialogProps {
  onClose: (reason: CloseReason) => void;
}

然后更新handleClose参数类型：

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

Dialog并在and中像这样传递它Button：

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

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