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

来自 docs，这是来自 Dialog 的 onClose prop 的签名：

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

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

然后更新handleClose参数类型：

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

然后在 Dialog 和 Button 中这样传递：

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

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

MUI 对话框 - 无法将 onClose 传递给对话框操作中的 onClick

MUI Dialog - Can't pass onClose to onClick inside dialog actions

dialog

typescript

reactjs

material-ui

react-typescript