據(jù)？)
如何在 Refine useForm 提交前修改并補全表單數(shù)據(jù)【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine在 React 管理后臺里表單字段的結(jié)構(gòu)經(jīng)常和后端 API 期望的數(shù)據(jù)結(jié)構(gòu)不一致用戶填的是兩個獨立輸入框如name和surname而接口要求的是一個合成字段fullName。Refine 的useForm系列實現(xiàn)都提供了在提交前改寫表單數(shù)據(jù)的能力本文基于 Refine 官方文檔按“核心實現(xiàn) → React Hook Form → Ant Design → Mantine”的順序給出每種實現(xiàn)下在數(shù)據(jù)發(fā)給 API 之前修改、補全字段的具體寫法。背景useForm 內(nèi)部如何處理提交先明確改造的入口在哪。Refine 的useForm內(nèi)部編排了useOne、useUpdate和useCreate三個數(shù)據(jù) Hook編輯或克隆記錄時用useOne拉取記錄作為表單初始值新建記錄時提交走useCreate更新記錄時走useUpdate。也就是說表單的取數(shù)和變更邏輯都由useForm接管你只需要把處理后的數(shù)據(jù)交給它返回的onFinish后續(xù)請求由框架發(fā)起。useForm有三種動作模式action modecreate默認(rèn)模式用于新建記錄edit編輯已有記錄需要傳入idclone復(fù)制已有記錄表單取原記錄的值作為初始值但提交時創(chuàng)建一條新記錄。無論哪種模式“提交前修改數(shù)據(jù)”的落點都是同一個在調(diào)用onFinish或使用各 UI 庫提供的等價屬性時傳入改寫后的對象。主路徑Headless / React Hook Form 實現(xiàn)改寫 onFinishReact Hook Form 是 Refine 各 UI 集成Material UI、Chakra UI 等共同依賴的底層實現(xiàn)它的寫法最直接從useForm返回值里取出refineCore.onFinish自己寫一個包裝函數(shù)在其中構(gòu)造新對象后再調(diào)用onFinish。import { useForm } from refinedev/react-hook-form; import React from react; import { FieldValues } from react-hook-form; export const UserCreate: React.FC () { const { refineCore: { onFinish }, register, handleSubmit, } useForm(); const onFinishHandler (data: FieldValues) { onFinish({ fullName: ${data.name} ${data.surname}, }); }; return ( form onSubmit{handleSubmit(onFinishHandler)} labelName: /label input {...register(name)} / br / labelSurname: /label input {...register(surname)} / br / button typesubmitSubmit/button /form ); };關(guān)鍵點在于提交鏈表單的onSubmit不是直接接handleSubmit(onFinish)而是接handleSubmit(onFinishHandler)。onFinishHandler拿到 React Hook Form 收集到的原始data后在這里拼接、刪減、重命名字段最后只把最終要提交的對象傳給onFinish——原始表單里不存在、但 API 需要的字段例如fullName就是在這一層補上的。如果你的表單字段需要保留、只額外補一個新字段用展開語法把原值帶上即可onFinish({ ...data, fullName: ${data.name} ${data.surname}, });可選分支一Ant Design 實現(xiàn)通過 onFinish 屬性改寫Ant Design 的useForm把提交回調(diào)交給了formProps。做法同樣是用一個包裝函數(shù)承接Form組件的onFinish回調(diào)再調(diào)用 Refine 的onFinishimport { Create, useForm } from refinedev/antd; import { Form, Input } from antd; import React from react; export const UserCreate: React.FC () { const { formProps, saveButtonProps, onFinish } useForm(); const handleOnFinish (values) { onFinish({ fullName: ${values.name} ${values.surname}, }); }; return ( Create saveButtonProps{saveButtonProps} Form {...formProps} onFinish{handleOnFinish} layoutvertical Form.Item labelName namename Input / /Form.Item Form.Item labelSurname namesurname Input / /Form.Item /Form /Create ); };注意formProps展開在Form上而onFinish{handleOnFinish}放在展開之后確保覆蓋掉formProps中默認(rèn)的提交處理回調(diào)收到的values才是改寫的數(shù)據(jù)源。可選分支二Mantine 實現(xiàn)使用 transformValuesMantine 的useForm不通過包裝回調(diào)而是提供一個專用的transformValues屬性直接接收一個轉(zhuǎn)換函數(shù)import { useForm, Create } from refinedev/mantine; import { TextInput } from mantine/core; const CreatePage () { const { saveButtonProps, getInputProps } useForm({ initialValues: { name: , surname: , }, transformValues: (values) ({ fullName: ${values.name} ${values.surname}, }), }); return ( Create saveButtonProps{saveButtonProps} form TextInput mt{8} labelName placeholderName {...getInputProps(name)} / TextInput mt{8} labelSurname placeholderSurname {...getInputProps(surname)} / /form /Create ); };transformValues的返回值就是最終提交的數(shù)據(jù)適合轉(zhuǎn)換邏輯穩(wěn)定的場景需要讀取其他組件狀態(tài)或做異步處理時React Hook Form / Ant Design 的回調(diào)包裝方式更靈活。提交后的行為與結(jié)果驗證改寫數(shù)據(jù)只影響發(fā)給后端的內(nèi)容提交流程本身仍由useForm完成。文檔說明了提交后可觀察到的行為默認(rèn) mutation 模式為pessimistic提交后立即發(fā)起變更請求表單在 mutation 完成前保持 loading 狀態(tài)失敗時錯誤會展示給用戶且不執(zhí)行緩存失效和重定向。提交成功或失敗時useForm都會通過 notification 提示用戶結(jié)果提示文案可用successNotification和errorNotification屬性自定義兩個屬性既可傳函數(shù)也可傳靜態(tài)配置函數(shù)形式能拿到 mutation 響應(yīng)來定制文案。mutation 成功后默認(rèn)重定向到該資源的列表頁可通過useForm的redirect屬性改為show、edit或false。因此驗證方式是提交表單后觀察成功通知與列表頁跳轉(zhuǎn)并確認(rèn)接口收到的 body 中是改寫后的結(jié)構(gòu)fullName而非name/surname。如果希望提交數(shù)據(jù)被合并進緩存做樂觀展示注意 optimistic 更新僅在optimistic和undoable兩種 mutation 模式下可用可通過optimisticUpdateMap自定義緩存更新方式。參考文檔表單指南“Modifying Data Before Submission”章節(jié)documentation/docs/guides-concepts/forms/index.mdReact Hook FormuseForm參考頁含提交前改數(shù)據(jù)的 FAQ 小節(jié)documentation/docs/packages/react-hook-form/use-form/index.mdAnt DesignuseForm參考頁含提交前改數(shù)據(jù)的 FAQ 小節(jié)documentation/docs/ui-integrations/ant-design/hooks/use-form/index.mdFAQ 條目“How can I change the form data before submitting it to the API?”documentation/docs/guides-concepts/faq/index.md【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 如何在 Refine useForm 提交前修改并補全表單數(shù)據(jù)？
如何在 Refine useForm 提交前修改并補全表單數(shù)據(jù)【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine在 React 管理后臺里表單字段的結(jié)構(gòu)經(jīng)常和后端 API 期望的數(shù)據(jù)結(jié)構(gòu)不一致用戶填的是兩個獨立輸入框如name和surname而接口要求的是一個合成字段fullName。Refine 的useForm系列實現(xiàn)都提供了在提交前改寫表單數(shù)據(jù)的能力本文基于 Refine 官方文檔按“核心實現(xiàn) → React Hook Form → Ant Design → Mantine”的順序給出每種實現(xiàn)下在數(shù)據(jù)發(fā)給 API 之前修改、補全字段的具體寫法。背景useForm 內(nèi)部如何處理提交先明確改造的入口在哪。Refine 的useForm內(nèi)部編排了useOne、useUpdate和useCreate三個數(shù)據(jù) Hook編輯或克隆記錄時用useOne拉取記錄作為表單初始值新建記錄時提交走useCreate更新記錄時走useUpdate。也就是說表單的取數(shù)和變更邏輯都由useForm接管你只需要把處理后的數(shù)據(jù)交給它返回的onFinish后續(xù)請求由框架發(fā)起。useForm有三種動作模式action modecreate默認(rèn)模式用于新建記錄edit編輯已有記錄需要傳入idclone復(fù)制已有記錄表單取原記錄的值作為初始值但提交時創(chuàng)建一條新記錄。無論哪種模式“提交前修改數(shù)據(jù)”的落點都是同一個在調(diào)用onFinish或使用各 UI 庫提供的等價屬性時傳入改寫后的對象。主路徑Headless / React Hook Form 實現(xiàn)改寫 onFinishReact Hook Form 是 Refine 各 UI 集成Material UI、Chakra UI 等共同依賴的底層實現(xiàn)它的寫法最直接從useForm返回值里取出refineCore.onFinish自己寫一個包裝函數(shù)在其中構(gòu)造新對象后再調(diào)用onFinish。import { useForm } from refinedev/react-hook-form; import React from react; import { FieldValues } from react-hook-form; export const UserCreate: React.FC () { const { refineCore: { onFinish }, register, handleSubmit, } useForm(); const onFinishHandler (data: FieldValues) { onFinish({ fullName: ${data.name} ${data.surname}, }); }; return ( form onSubmit{handleSubmit(onFinishHandler)} labelName: /label input {...register(name)} / br / labelSurname: /label input {...register(surname)} / br / button typesubmitSubmit/button /form ); };關(guān)鍵點在于提交鏈表單的onSubmit不是直接接handleSubmit(onFinish)而是接handleSubmit(onFinishHandler)。onFinishHandler拿到 React Hook Form 收集到的原始data后在這里拼接、刪減、重命名字段最后只把最終要提交的對象傳給onFinish——原始表單里不存在、但 API 需要的字段例如fullName就是在這一層補上的。如果你的表單字段需要保留、只額外補一個新字段用展開語法把原值帶上即可onFinish({ ...data, fullName: ${data.name} ${data.surname}, });可選分支一Ant Design 實現(xiàn)通過 onFinish 屬性改寫Ant Design 的useForm把提交回調(diào)交給了formProps。做法同樣是用一個包裝函數(shù)承接Form組件的onFinish回調(diào)再調(diào)用 Refine 的onFinishimport { Create, useForm } from refinedev/antd; import { Form, Input } from antd; import React from react; export const UserCreate: React.FC () { const { formProps, saveButtonProps, onFinish } useForm(); const handleOnFinish (values) { onFinish({ fullName: ${values.name} ${values.surname}, }); }; return ( Create saveButtonProps{saveButtonProps} Form {...formProps} onFinish{handleOnFinish} layoutvertical Form.Item labelName namename Input / /Form.Item Form.Item labelSurname namesurname Input / /Form.Item /Form /Create ); };注意formProps展開在Form上而onFinish{handleOnFinish}放在展開之后確保覆蓋掉formProps中默認(rèn)的提交處理回調(diào)收到的values才是改寫的數(shù)據(jù)源。可選分支二Mantine 實現(xiàn)使用 transformValuesMantine 的useForm不通過包裝回調(diào)而是提供一個專用的transformValues屬性直接接收一個轉(zhuǎn)換函數(shù)import { useForm, Create } from refinedev/mantine; import { TextInput } from mantine/core; const CreatePage () { const { saveButtonProps, getInputProps } useForm({ initialValues: { name: , surname: , }, transformValues: (values) ({ fullName: ${values.name} ${values.surname}, }), }); return ( Create saveButtonProps{saveButtonProps} form TextInput mt{8} labelName placeholderName {...getInputProps(name)} / TextInput mt{8} labelSurname placeholderSurname {...getInputProps(surname)} / /form /Create ); };transformValues的返回值就是最終提交的數(shù)據(jù)適合轉(zhuǎn)換邏輯穩(wěn)定的場景需要讀取其他組件狀態(tài)或做異步處理時React Hook Form / Ant Design 的回調(diào)包裝方式更靈活。提交后的行為與結(jié)果驗證改寫數(shù)據(jù)只影響發(fā)給后端的內(nèi)容提交流程本身仍由useForm完成。文檔說明了提交后可觀察到的行為默認(rèn) mutation 模式為pessimistic提交后立即發(fā)起變更請求表單在 mutation 完成前保持 loading 狀態(tài)失敗時錯誤會展示給用戶且不執(zhí)行緩存失效和重定向。提交成功或失敗時useForm都會通過 notification 提示用戶結(jié)果提示文案可用successNotification和errorNotification屬性自定義兩個屬性既可傳函數(shù)也可傳靜態(tài)配置函數(shù)形式能拿到 mutation 響應(yīng)來定制文案。mutation 成功后默認(rèn)重定向到該資源的列表頁可通過useForm的redirect屬性改為show、edit或false。因此驗證方式是提交表單后觀察成功通知與列表頁跳轉(zhuǎn)并確認(rèn)接口收到的 body 中是改寫后的結(jié)構(gòu)fullName而非name/surname。如果希望提交數(shù)據(jù)被合并進緩存做樂觀展示注意 optimistic 更新僅在optimistic和undoable兩種 mutation 模式下可用可通過optimisticUpdateMap自定義緩存更新方式。參考文檔表單指南“Modifying Data Before Submission”章節(jié)documentation/docs/guides-concepts/forms/index.mdReact Hook FormuseForm參考頁含提交前改數(shù)據(jù)的 FAQ 小節(jié)documentation/docs/packages/react-hook-form/use-form/index.mdAnt DesignuseForm參考頁含提交前改數(shù)據(jù)的 FAQ 小節(jié)documentation/docs/ui-integrations/ant-design/hooks/use-form/index.mdFAQ 條目“How can I change the form data before submitting it to the API?”documentation/docs/guides-concepts/faq/index.md【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考