前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载Confirm是 react-admin 基于 Material UI 的Dialog实现的确认弹窗组件用于在任何危险操作如删除、批量操作执行前弹出二次确认是构建安全交互的核心基础设施。本文将从基本用法、完整 Props 说明、国际化机制、样式定制sx / CSS API到它在删除按钮中的底层集成原理DeleteButton mutationModepessimistic等结合仓库源码给出可直接复用的实战方案。组件概述为什么要用ConfirmConfirm的本质是一个轻量封装它在内部组合了 Material UI 的DialogTitle、DialogContent、DialogActions与两个按钮取消 / 确认对外只暴露isOpen、onClose、onConfirm等少量受控属性。你只需要维护一个open状态即可获得一个完整、可访问带aria-labelledbyalert-dialog-title且支持国际化的确认弹窗无需自己手写 Dialog 骨架。从源码packages/ra-ui-materialui/src/layout/Confirm.tsx可以看到组件内部还做了两个重要的交互细节事件冒泡隔离handleConfirm与弹窗容器的onClick均调用e.stopPropagation()避免点击弹窗内容时误触背后的列表行或按钮事件Storybook 中的BackClick故事正是为了演示这一行为见packages/ra-ui-materialui/src/layout/Confirm.stories.tsx加载态禁用loading为true时取消与确认按钮同时被置为disabled防止用户在异步操作进行中重复提交。基本用法动作按钮 确认弹窗要执行某个动作前先征求用户确认只需让动作按钮打开一个Confirm。以下示例构建了一个删除按钮点击后弹出确认框用户确认后才真正调用useDelete删除记录且删除期间按钮处于loading禁用状态。import { useState } from react; import { Button, Confirm, useRecordContext, useDelete, } from react-admin; const BulkResetViewsButton () { const record useRecordContext(); const [open, setOpen] useState(false); const [remove, { isPending }] useDelete( posts, { id: record record.id } ); const handleClick () setOpen(true); const handleDialogClose () setOpen(false); const handleConfirm () { remove(); setOpen(false); }; return ( Button labelDelete onClick{handleClick} / Confirm isOpen{open} loading{isPending} title{Delete post #${record record.id}} contentAre you sure you want to delete this item? onConfirm{handleConfirm} onClose{handleDialogClose} / / ); };这里的关键是三个回调的分工onClose点击取消按钮、按 ESC 或点击遮罩时触发只负责关闭弹窗不执行任何业务逻辑onConfirm点击确认按钮时触发执行真正的动作本例为remove()并关闭弹窗loading绑定useDelete返回的isPending删除请求进行中时两个按钮都会被禁用。Props 完整说明Prop必填类型默认值说明title是string-弹窗标题content是ReactNode-弹窗正文内容onClose是MouseEventHandler-取消按钮的 onClick 事件处理器onConfirm是MouseEventHandler-确认按钮的 onClick 事件处理器isOpen否booleanfalsetrue显示弹窗false隐藏loading否booleanfalse为true时应用到两个操作按钮的disabled属性cancel否stringra.action.cancel取消按钮的标签confirm否stringra.action.confirm确认按钮的标签confirmColor否stringprimary确认按钮的颜色ConfirmIcon否ComponentCheckCircleIcon确认按钮的图标组件CancelIcon否ComponentErrorOutlineIcon取消按钮的图标组件titleTranslateOptions否{ id?: string, name?: string }{}弹窗标题翻译中使用的自定义 id 与 name 插值contentTranslateOptions否{ id?: string, name?: string }{}弹窗正文翻译中使用的自定义 id 与 name 插值sx否SxPropsMaterial UI 快捷样式属性可访问主题自定义样式在源码packages/ra-ui-materialui/src/layout/Confirm.tsx中这些默认值与类型声明一一对应confirmColor的合法取值在类型层面被限定为primary | warning。此外该组件还透传 Material UIDialogProps中除open、onClose、title、content之外的其余属性ConfirmProps extends OmitDialogProps, open | onClose | title | content例如maxWidth、fullWidth等原生 Dialog 属性都可以直接使用。关于翻译的两个细节文档明确title、content、cancel、confirm这几个文本属性都支持传递翻译键translation key。源码中的翻译逻辑为{typeof title string ? translate(title, { _: title, ...titleTranslateOptions }) : title}由此可以确认两个行为title为字符串时会被当作翻译键进行翻译content则只有在值为字符串时才可翻译如果传入的是ReactNode如 JSX 元素则原样渲染翻译时传入_: title作为兜底fallback文案即当翻译键在字典中不存在时直接显示键本身。titleTranslateOptions与contentTranslateOptions用于向翻译消息中注入插值变量如%{id}、%{name}。sxCSS APIConfirm接受常规的className属性也可通过sx属性覆盖内部组件的大量样式sx的语法与示例见 SX 文档。sx支持以下子类规则规则名说明 .RaConfirm-confirmPrimaryconfirmColor为primary时应用到确认按钮 .RaConfirm-confirmWarningconfirmColor为warning时应用到确认按钮从源码可以看到这两个类名的生成机制组件使用PREFIX RaConfirm通过ConfirmClasses { confirmPrimary: RaConfirm-confirmPrimary, confirmWarning: RaConfirm-confirmWarning }定义并在styled(Dialog, { name: PREFIX })中注册为 Material UI 主题组件。confirmPrimary会将确认按钮文字着色为主题色palette.primary.main而confirmWarning使用错误色palette.error.main并在悬停时通过color-mix生成淡淡的底色视觉上提示操作的危险性。如需通过应用级主题覆盖所有Confirm实例的样式可使用主题中的RaConfirm键原理见 AppTheme 文档import { createTheme } from mui/material/styles; const theme createTheme({ components: { RaConfirm: { styleOverrides: { root: { /* 覆盖 Dialog 根节点 */ }, confirmPrimary: { /* 覆盖 primary 确认按钮 */ }, confirmWarning: { /* 覆盖 warning 确认按钮 */ }, }, }, }, });删除需确认DeleteButton mutationModepessimisticreact-admin 的DeleteButton默认采用**可撤销undoable**的乐观删除模式点击按钮后删除立即执行同时出现带 undo 链接的通知用户可撤销删除详见 Features 文档。如果你想强制用户在删除前确认可以改用DeleteButton mutationModepessimistic。底层实现上这正好复用了Confirm组件——从源码packages/ra-ui-materialui/src/button/DeleteButton.tsx可以看到DeleteButton根据mutationMode决定渲染哪个子按钮return finalMutationMode undoable ? ( DeleteWithUndoButton ref{ref} record{record} {...rest} / ) : ( DeleteWithConfirmButton mutationMode{finalMutationMode} ... / );其中DeleteWithConfirmButton源码见packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx内部就是渲染一个Confirm打开按钮触发setOpen(true)确认按钮触发useDeleteController的handleDelete且loading绑定isPending删除成功或失败后都会关闭弹窗setOpen(false)并执行默认的通知与重定向副作用。值得留意的是DeleteWithConfirmButton还通过useResourceTranslation自动生成带插值的确认文案默认翻译键为标题ra.message.delete_title英文默认值为Delete %{name} %{recordRepresentation}正文ra.message.delete_content英文默认值为Are you sure you want to delete this %{name}?见packages/ra-language-english/src/index.ts中的message.delete_title/message.delete_content。你仍可通过confirmTitle与confirmContent属性覆盖这些默认文案。在列表DataTable中配合使用import { List, DataTable, DeleteButton } from react-admin; const PostList () ( List DataTable DataTable.Col sourceid / DataTable.Col sourcetitle / DataTable.Col DeleteButton mutationModepessimistic / /DataTable.Col /DataTable /List );批量删除同样支持BulkDeleteButton mutationModepessimistic批量删除多条记录时在 DataTable 的 bulk action 场景 中使用BulkDeleteButton mutationModepessimistic即可在删除前弹出确认框import { List, DataTable, BulkDeleteButton } from react-admin; const PostList () ( List DataTable bulkActionButtons{BulkDeleteButton mutationModepessimistic /} DataTable.Col sourceid / DataTable.Col sourcetitle / /DataTable /List );其底层BulkDeleteWithConfirmButton源码见packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx同样组合了Confirm并提供了两处与单条删除不同的细节默认确认文案翻译键为ra.message.bulk_delete_title与ra.message.bulk_delete_content通过confirmTitle/confirmContent属性可覆盖弹窗关闭时机与mutationMode相关仅当mutationMode pessimistic时在删除请求onSettled成功或失败后才关闭弹窗避免用户在请求未结束时关闭对话框乐观 / 可撤销模式下则立即关闭。常见问题与最佳实践可撤销与确认模式的选择默认的 undoable 模式对常规操作体验更顺滑pessimisticConfirm适合删除、批量更新等不可逆或低频率危险操作要求用户明确确认。事件冒泡由于Confirm已内部处理stopPropagation将弹窗放在列表行、卡片等可点击元素内部也不会触发外层点击事件。文案国际化自定义确认弹窗时建议直接传入翻译键如ra.action.cancel/ra.action.confirm等配合titleTranslateOptions/contentTranslateOptions注入插值变量避免硬编码英文文案。加载状态异步确认场景如删除请求务必把loading绑定到 mutation 的isPending防止重复提交。参考源码与文档组件实现packages/ra-ui-materialui/src/layout/Confirm.tsxStorybook 演示packages/ra-ui-materialui/src/layout/Confirm.stories.tsx单条删除集成packages/ra-ui-materialui/src/button/DeleteButton.tsx、packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx批量删除集成packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx默认英文文案packages/ra-language-english/src/index.ts相关文档SX 样式、应用级主题覆盖、DataTable 批量操作赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐终极指南React Native Elements Dialog组件打造高效弹窗交互方案终极指南React Native Elements Dialog组件打造高效弹窗交互方案 React Native Elements是一个跨平台的ReactUI组件移动开发前端3分钟掌握Material-UI三大弹窗组件Modal/Dialog/Popover实战指南3分钟掌握Material UI三大弹窗组件Modal/Dialog/Popover实战指南 你还在为React弹窗组件选型头疼还在纠结Modal、Dial前端UI组件设计系统PrimeNG ConfirmDialog 组件实战指南基于 ConfirmationService 的 Observable 确认弹窗体系PrimeNG ConfirmDialog 组件实战指南基于 ConfirmationService 的 Observable 确认弹窗体系 ConfirmD前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考