如何在 Refine useForm 提交前修改并补全表单数据【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine在 React 管理后台里表单字段的结构经常和后端 API 期望的数据结构不一致用户填的是两个独立输入框如name和surname而接口要求的是一个合成字段fullName。Refine 的useForm系列实现都提供了在提交前改写表单数据的能力本文基于 Refine 官方文档按“核心实现 → React Hook Form → Ant Design → Mantine”的顺序给出每种实现下在数据发给 API 之前修改、补全字段的具体写法。背景useForm 内部如何处理提交先明确改造的入口在哪。Refine 的useForm内部编排了useOne、useUpdate和useCreate三个数据 Hook编辑或克隆记录时用useOne拉取记录作为表单初始值新建记录时提交走useCreate更新记录时走useUpdate。也就是说表单的取数和变更逻辑都由useForm接管你只需要把处理后的数据交给它返回的onFinish后续请求由框架发起。useForm有三种动作模式action modecreate默认模式用于新建记录edit编辑已有记录需要传入idclone复制已有记录表单取原记录的值作为初始值但提交时创建一条新记录。无论哪种模式“提交前修改数据”的落点都是同一个在调用onFinish或使用各 UI 库提供的等价属性时传入改写后的对象。主路径Headless / React Hook Form 实现改写 onFinishReact Hook Form 是 Refine 各 UI 集成Material UI、Chakra UI 等共同依赖的底层实现它的写法最直接从useForm返回值里取出refineCore.onFinish自己写一个包装函数在其中构造新对象后再调用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 ); };关键点在于提交链表单的onSubmit不是直接接handleSubmit(onFinish)而是接handleSubmit(onFinishHandler)。onFinishHandler拿到 React Hook Form 收集到的原始data后在这里拼接、删减、重命名字段最后只把最终要提交的对象传给onFinish——原始表单里不存在、但 API 需要的字段例如fullName就是在这一层补上的。如果你的表单字段需要保留、只额外补一个新字段用展开语法把原值带上即可onFinish({ ...data, fullName: ${data.name} ${data.surname}, });可选分支一Ant Design 实现通过 onFinish 属性改写Ant Design 的useForm把提交回调交给了formProps。做法同样是用一个包装函数承接Form组件的onFinish回调再调用 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中默认的提交处理回调收到的values才是改写的数据源。可选分支二Mantine 实现使用 transformValuesMantine 的useForm不通过包装回调而是提供一个专用的transformValues属性直接接收一个转换函数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的返回值就是最终提交的数据适合转换逻辑稳定的场景需要读取其他组件状态或做异步处理时React Hook Form / Ant Design 的回调包装方式更灵活。提交后的行为与结果验证改写数据只影响发给后端的内容提交流程本身仍由useForm完成。文档说明了提交后可观察到的行为默认 mutation 模式为pessimistic提交后立即发起变更请求表单在 mutation 完成前保持 loading 状态失败时错误会展示给用户且不执行缓存失效和重定向。提交成功或失败时useForm都会通过 notification 提示用户结果提示文案可用successNotification和errorNotification属性自定义两个属性既可传函数也可传静态配置函数形式能拿到 mutation 响应来定制文案。mutation 成功后默认重定向到该资源的列表页可通过useForm的redirect属性改为show、edit或false。因此验证方式是提交表单后观察成功通知与列表页跳转并确认接口收到的 body 中是改写后的结构fullName而非name/surname。如果希望提交数据被合并进缓存做乐观展示注意 optimistic 更新仅在optimistic和undoable两种 mutation 模式下可用可通过optimisticUpdateMap自定义缓存更新方式。参考文档表单指南“Modifying Data Before Submission”章节documentation/docs/guides-concepts/forms/index.mdReact Hook FormuseForm参考页含提交前改数据的 FAQ 小节documentation/docs/packages/react-hook-form/use-form/index.mdAnt DesignuseForm参考页含提交前改数据的 FAQ 小节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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考