- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个可重复使用的 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>
);
}
最佳答案
来自docs ,这是 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';
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')}
关于reactjs - MUI 对话框 - 无法将 onClose 传递给对话框操作中的 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69753753/
我有这个简单的 WebSocket 问题 WebSocket Test var wsUri = "ws://echo.websocket.org/"; var output;
如何在用户关闭浏览器时运行 javascript。我尝试使用“onunload”,但每次我按 F5/刷新按钮时它都会调用?谢谢 最佳答案 就页面上的 Javascript 而言,关闭浏览器、导航到另一
我想在应用程序关闭时显示“感谢使用”消息。 处理应用程序关闭的事件是什么? 最佳答案 假设您的 Activity 在 A->B->C->D 中。当用户从 D Activity 按下后退按钮然后转到 C
我得到了这门课 class CWebBrowser2 : public CWnd 我想覆盖 OnClose 到目前为止我所做的是在我添加的头文件中 void OnClose();在我添加的 .cpp
我想检查一下我的 即将关闭。有没有办法使用我的 sidenav 对象的 EventEmitter onClose 来检查?你能举个例子吗? 最佳答案 这可以通过两种不同的方式实现——通过模板,以及在
我有一个系统,人们可以添加多个开始和结束日期,即屏幕截图: 选择第一个日期后,onClose 事件会设置第二个输入的日期并将其打开。浏览器 datePickers = function() {
我正在使用 fancyBox v2.0.4 ... 嗯,这应该很简单,但是在我的情况下不起作用...我只是想在 fancybox 关闭时运行回调函数... $('a#stpa_announcement
我正在研究一个放置在我项目的每种形式上的组件。是否可以在运行时让组件将代码包含到其所有者表单的 OnClose 事件处理程序中。换句话说,表单将触发它自己的 OnClose 事件处理程序,但组件还将包
我的项目中有许多使用 Form OnClose 事件的 Forms。但是,我需要在运行时的所有表单上添加另一个“通用”OnClose。有没有办法只添加新的事件方法,而不是替换它?因此,表单将触发两个
在 javascript 中,我们有 WebSocket.onclose() 用于在服务器关闭 websocket 连接时执行一些操作。当客户端设备关闭连接时,有没有办法在 Python 服务器中执行
在 javascript 中,我们有 WebSocket.onclose() 用于在服务器关闭 websocket 连接时执行一些操作。当客户端设备关闭连接时,有没有办法在 Python 服务器中执行
在我的 Fancybox 完全关闭且页面恢复正常后,我尝试触发第二个 jquery 函数。我尝试使用 onClosed fancybox 属性,但它不是在框关闭后发生,而是在框打开之前发生(在页面加载
我刚刚开始在浏览器中使用桌面通知来通知用户有关新任务和任务事件的信息。但重要的是要向每个用户通知每个事件,而且永远不要重复通知。 我检查了this descktop notification问题和许多
可以为你们提供一些帮助。 所以我使用 jQuery colorbox 并通过单击链接激活它。在颜色框中有一个带有一些复选框的表单,我想做的是在单击提交时将所选复选框的所有值放入父级(并随后关闭颜色框)
随着jQuery UI Datepicker Widget ,我想检查用户是否在模糊时将特定输入字段留空,如果是,则将日期值分配给 altField 的值。在我的脑海里有这样的事情...... $(s
回调事件不会在通过模态、关闭按钮和 esc 关闭弹出窗口时触发 我已经尝试将其添加到准备就绪的文档中,并且在单击触发器时它们都起作用了 $('.flipvideowrap').bind('click
我正在尝试重定向到 .fancybox 的“onclose”属性上的 URL ...它确实有效。有任何想法吗?代码如下。注意:模式看起来很好,但是当用户按下顶部的“x”时......屏幕只是空白。
我需要有关 UI 元素的帮助。我想在第一次关闭时显示下一个日历。不幸的是 onClose 函数没有运行:/我不知道为什么.. $(function () { $('#datepickerDat
我使用这个函数来调用我的窗口关闭。 这是确认框弹出窗口。 if(confirm("Sure you want to close the window"); { // yes return t
我正在实现一个带有 WebSocket 端点的应用程序。这是一些代码: @ApplicationScoped @ServerEndpoint(value="/socket", encoders = {
我是一名优秀的程序员,十分优秀!