前端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實現(xiàn)的確認彈窗組件用于在任何危險操作如刪除、批量操作執(zhí)行前彈出二次確認是構(gòu)建安全交互的核心基礎(chǔ)設(shè)施。本文將從基本用法、完整 Props 說明、國際化機制、樣式定制sx / CSS API到它在刪除按鈕中的底層集成原理DeleteButton mutationModepessimistic等結(jié)合倉庫源碼給出可直接復(fù)用的實戰(zhàn)方案。組件概述為什么要用ConfirmConfirm的本質(zhì)是一個輕量封裝它在內(nèi)部組合了 Material UI 的DialogTitle、DialogContent、DialogActions與兩個按鈕取消 / 確認對外只暴露isOpen、onClose、onConfirm等少量受控屬性。你只需要維護一個open狀態(tài)即可獲得一個完整、可訪問帶aria-labelledbyalert-dialog-title且支持國際化的確認彈窗無需自己手寫 Dialog 骨架。從源碼packages/ra-ui-materialui/src/layout/Confirm.tsx可以看到組件內(nèi)部還做了兩個重要的交互細節(jié)事件冒泡隔離handleConfirm與彈窗容器的onClick均調(diào)用e.stopPropagation()避免點擊彈窗內(nèi)容時誤觸背后的列表行或按鈕事件Storybook 中的BackClick故事正是為了演示這一行為見packages/ra-ui-materialui/src/layout/Confirm.stories.tsx加載態(tài)禁用loading為true時取消與確認按鈕同時被置為disabled防止用戶在異步操作進行中重復(fù)提交?；居梅▌幼靼粹o 確認彈窗要執(zhí)行某個動作前先征求用戶確認只需讓動作按鈕打開一個Confirm。以下示例構(gòu)建了一個刪除按鈕點擊后彈出確認框用戶確認后才真正調(diào)用useDelete刪除記錄且刪除期間按鈕處于loading禁用狀態(tài)。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} / / ); };這里的關(guān)鍵是三個回調(diào)的分工onClose點擊取消按鈕、按 ESC 或點擊遮罩時觸發(fā)只負責(zé)關(guān)閉彈窗不執(zhí)行任何業(yè)務(wù)邏輯onConfirm點擊確認按鈕時觸發(fā)執(zhí)行真正的動作本例為remove()并關(guān)閉彈窗l(fā)oading綁定useDelete返回的isPending刪除請求進行中時兩個按鈕都會被禁用。Props 完整說明Prop必填類型默認值說明title是string-彈窗標(biāo)題content是ReactNode-彈窗正文內(nèi)容onClose是MouseEventHandler-取消按鈕的 onClick 事件處理器onConfirm是MouseEventHandler-確認按鈕的 onClick 事件處理器isOpen否booleanfalsetrue顯示彈窗false隱藏loading否booleanfalse為true時應(yīng)用到兩個操作按鈕的disabled屬性cancel否stringra.action.cancel取消按鈕的標(biāo)簽confirm否stringra.action.confirm確認按鈕的標(biāo)簽confirmColor否stringprimary確認按鈕的顏色ConfirmIcon否ComponentCheckCircleIcon確認按鈕的圖標(biāo)組件CancelIcon否ComponentErrorOutlineIcon取消按鈕的圖標(biāo)組件titleTranslateOptions否{ id?: string, name?: string }{}彈窗標(biāo)題翻譯中使用的自定義 id 與 name 插值contentTranslateOptions否{ id?: string, name?: string }{}彈窗正文翻譯中使用的自定義 id 與 name 插值sx否SxPropsMaterial UI 快捷樣式屬性可訪問主題自定義樣式在源碼packages/ra-ui-materialui/src/layout/Confirm.tsx中這些默認值與類型聲明一一對應(yīng)confirmColor的合法取值在類型層面被限定為primary | warning。此外該組件還透傳 Material UIDialogProps中除open、onClose、title、content之外的其余屬性ConfirmProps extends OmitDialogProps, open | onClose | title | content例如maxWidth、fullWidth等原生 Dialog 屬性都可以直接使用。關(guān)于翻譯的兩個細節(jié)文檔明確title、content、cancel、confirm這幾個文本屬性都支持傳遞翻譯鍵translation key。源碼中的翻譯邏輯為{typeof title string ? translate(title, { _: title, ...titleTranslateOptions }) : title}由此可以確認兩個行為title為字符串時會被當(dāng)作翻譯鍵進行翻譯content則只有在值為字符串時才可翻譯如果傳入的是ReactNode如 JSX 元素則原樣渲染翻譯時傳入_: title作為兜底fallback文案即當(dāng)翻譯鍵在字典中不存在時直接顯示鍵本身。titleTranslateOptions與contentTranslateOptions用于向翻譯消息中注入插值變量如%{id}、%{name}。sxCSS APIConfirm接受常規(guī)的className屬性也可通過sx屬性覆蓋內(nèi)部組件的大量樣式sx的語法與示例見 SX 文檔。sx支持以下子類規(guī)則規(guī)則名說明 .RaConfirm-confirmPrimaryconfirmColor為primary時應(yīng)用到確認按鈕 .RaConfirm-confirmWarningconfirmColor為warning時應(yīng)用到確認按鈕從源碼可以看到這兩個類名的生成機制組件使用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生成淡淡的底色視覺上提示操作的危險性。如需通過應(yīng)用級主題覆蓋所有Confirm實例的樣式可使用主題中的RaConfirm鍵原理見 AppTheme 文檔import { createTheme } from mui/material/styles; const theme createTheme({ components: { RaConfirm: { styleOverrides: { root: { /* 覆蓋 Dialog 根節(jié)點 */ }, confirmPrimary: { /* 覆蓋 primary 確認按鈕 */ }, confirmWarning: { /* 覆蓋 warning 確認按鈕 */ }, }, }, }, });刪除需確認DeleteButton mutationModepessimisticreact-admin 的DeleteButton默認采用**可撤銷undoable**的樂觀刪除模式點擊按鈕后刪除立即執(zhí)行同時出現(xiàn)帶 undo 鏈接的通知用戶可撤銷刪除詳見 Features 文檔。如果你想強制用戶在刪除前確認可以改用DeleteButton mutationModepessimistic。底層實現(xiàn)上這正好復(fù)用了Confirm組件——從源碼packages/ra-ui-materialui/src/button/DeleteButton.tsx可以看到DeleteButton根據(jù)mutationMode決定渲染哪個子按鈕return finalMutationMode undoable ? ( DeleteWithUndoButton ref{ref} record{record} {...rest} / ) : ( DeleteWithConfirmButton mutationMode{finalMutationMode} ... / );其中DeleteWithConfirmButton源碼見packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx內(nèi)部就是渲染一個Confirm打開按鈕觸發(fā)setOpen(true)確認按鈕觸發(fā)useDeleteController的handleDelete且loading綁定isPending刪除成功或失敗后都會關(guān)閉彈窗setOpen(false)并執(zhí)行默認的通知與重定向副作用。值得留意的是DeleteWithConfirmButton還通過useResourceTranslation自動生成帶插值的確認文案默認翻譯鍵為標(biāo)題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并提供了兩處與單條刪除不同的細節(jié)默認確認文案翻譯鍵為ra.message.bulk_delete_title與ra.message.bulk_delete_content通過confirmTitle/confirmContent屬性可覆蓋彈窗關(guān)閉時機與mutationMode相關(guān)僅當(dāng)mutationMode pessimistic時在刪除請求onSettled成功或失敗后才關(guān)閉彈窗避免用戶在請求未結(jié)束時關(guān)閉對話框樂觀 / 可撤銷模式下則立即關(guān)閉。常見問題與最佳實踐可撤銷與確認模式的選擇默認的 undoable 模式對常規(guī)操作體驗更順滑pessimisticConfirm適合刪除、批量更新等不可逆或低頻率危險操作要求用戶明確確認。事件冒泡由于Confirm已內(nèi)部處理stopPropagation將彈窗放在列表行、卡片等可點擊元素內(nèi)部也不會觸發(fā)外層點擊事件。文案國際化自定義確認彈窗時建議直接傳入翻譯鍵如ra.action.cancel/ra.action.confirm等配合titleTranslateOptions/contentTranslateOptions注入插值變量避免硬編碼英文文案。加載狀態(tài)異步確認場景如刪除請求務(wù)必把loading綁定到 mutation 的isPending防止重復(fù)提交。參考源碼與文檔組件實現(xiàn)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相關(guān)文檔SX 樣式、應(yīng)用級主題覆蓋、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點擊查看免費下載相關(guān)推薦終極指南React Native Elements Dialog組件打造高效彈窗交互方案終極指南React Native Elements Dialog組件打造高效彈窗交互方案 React Native Elements是一個跨平臺的ReactUI組件移動開發(fā)前端3分鐘掌握Material-UI三大彈窗組件Modal/Dialog/Popover實戰(zhàn)指南3分鐘掌握Material UI三大彈窗組件Modal/Dialog/Popover實戰(zhàn)指南 你還在為React彈窗組件選型頭疼還在糾結(jié)Modal、Dial前端UI組件設(shè)計系統(tǒng)PrimeNG ConfirmDialog 組件實戰(zhàn)指南基于 ConfirmationService 的 Observable 確認彈窗體系PrimeNG ConfirmDialog 組件實戰(zhàn)指南基于 ConfirmationService 的 Observable 確認彈窗體系 ConfirmD前端UI組件創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考