企业官网建设流程全解析

如何在 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 mode）：

• create：默认模式，用于新建记录；
• edit：编辑已有记录，需要传入id；
• clone：复制已有记录，表单取原记录的值作为初始值，但提交时创建一条新记录。

无论哪种模式，“提交前修改数据”的落点都是同一个：在调用onFinish（或使用各 UI 库提供的等价属性）时，传入改写后的对象。

主路径：Headless / React Hook Form 实现改写 onFinish

React 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)}> <label>Name: </label> <input {...register("name")} /> <br /> <label>Surname: </label> <input {...register("surname")} /> <br /> <button type="submit">Submit</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 的onFinish：

import { 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} layout="vertical"> <Form.Item label="Name" name="name"> <Input /> </Form.Item> <Form.Item label="Surname" name="surname"> <Input /> </Form.Item> </Form> </Create> ); };

注意formProps展开在<Form>上，而onFinish={handleOnFinish}放在展开之后，确保覆盖掉formProps中默认的提交处理，回调收到的values才是改写的数据源。

可选分支二：Mantine 实现使用 transformValues

Mantine 的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} label="Name" placeholder="Name" {...getInputProps("name")} /> <TextInput mt={8} label="Surname" placeholder="Surname" {...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.md
• React Hook FormuseForm参考页（含提交前改数据的 FAQ 小节）：documentation/docs/packages/react-hook-form/use-form/index.md
• Ant DesignuseForm参考页（含提交前改数据的 FAQ 小节）：documentation/docs/ui-integrations/ant-design/hooks/use-form/index.md
• FAQ 条目“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