GoWVP 全栈开发日记[5]：使用 react-hook-form 完成表单
-
服务端源代码 https://github.com/gowvp/gb28181
-
前端源代码 https://github.com/gowvp/gb28181_web
介绍
GoWVP (Golang Web Video Platfrom) 是一个 Go 语言实现的，基于 GB28181-2022 标准实现的网络视频平台，负责实现核心信令与设备管理后台部分，支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联，支持rtsp/rtmp等视频流转发到国标平台，支持rtsp/rtmp等推流转发到国标平台。
技术栈
Golang v1.23, Goweb v1.x, Gin v1.10, Gorm v1.25 …
React 19, Vite 6.x, Typescript, React-Router v7, React-Query v5, shadcn/ui …
React-Hook-Form
在项目中迎来第一个表单，按照 shadcn/ui 执行命令 npx shadcn@latest add form ，将会安装 react-hook-form，以下简称 RHF。
在项目中首次使用 react-hook-form 时，终端或浏览器中会提示这样的错误。
看错误提示，似乎是导入了错误的属性?
在业务层并没有看到相关的参数， 快捷键 shift+command+f 全局搜索关键字 FieldValues，此时可以看到咱们刚刚执行命令添加的 form 文件有点问题，并且旁边给了很好的提示。
使用快键键 command+. 快速修复，在前面补充 type 关键字。
关闭 Sheet
在项目中，我使用 sheet 作为 form 的摆台，所以是否关闭应该跟随表单的提交结果。
方法一 此方法无法由函数控制开关，只能提供默认关闭按钮，推荐方法二。
<SheetClose asChild>
<Button>关闭</Button>
</SheetClose>
方法二 通过 useState 管理状态 (推荐)
const [open, setOpen] = useState(false);
// ...
<Sheet open={open} onOpenChange={setOpen}>
</Sheet>
给 Button 加点动画
自定义动画 Button 组件设计:
- 在接口处理请求时，叠加一个加载动画，此加载动画不能影响到原组件的宽度，所以使用 zIndex css 属性叠加在上层。
- 加载动画背景是白色，可以加一点透明度或者高斯模糊，这里我选择了透明度，还能看清原来按钮上淡淡的文字。
默认的 shadcn/ui 的 button 按钮是没有加载动画的，使用 lucide-react 的 Loader2 图标加一点点 css 动画实现加载效果。
编辑 components/ui/button.tsx:55 ，增加 loading 参数，将下方的代码复制进去，具体修改如下图所示。
{props.children}
{loading && (
<div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-80 z-10">
<Loader2 className="animate-spin" />
</div>
)}
React-Query useMutation
useMutation 可以用来发起 POST、PUT、DELETE 等会对服务器数据进行修改的请求。提供了请求状态的管理，包括 isLoading（表示请求是否正在进行）、isError（表示请求是否出错）、isSuccess（表示请求是否成功）等状态变量，方便你在 UI 上根据请求状态展示不同的反馈，比如显示加载中的进度条、错误信息或成功提示等。
请求参数
mutationFn: 执行的异步函数onSuccess: 执行成功的处理函数onError: 执行失败的处理函数
返回参数
mutate执行的异步函数isPending如果函数正在执行，则为 true，可以用于显示 loading 状态
当做出修改后，应当将当前页的缓存数据失效，使用 invalidateQueries，默认情况下匹配的查询都会立即标记为无效，并在后台重新获取。
- 如果您不希望活跃查询重新获取，而只是将其标记为无效，则可以使用 refetchType: ‘none’ 选项。
- 如果您还希望重新获取非活跃查询，请使用 refetchType: ‘all’ 选项
await queryClient.invalidateQueries(
{
queryKey: ['posts'],
exact,
refetchType: 'active',
}
)
queryKey 见 useQuery 的解释。
exact 为 true 时表示精确查询，比如完全匹配 queryKey。
refetchType 默认为 active ，一般此参数可免填。
vite env 配置
在项目中可以使用 import.meta.env. 获取文件中定义的环境变量。
Typescript 项目可以在项目根目录下定义 vite-env.d.ts 获取语法提示。
可以定义 .env.development 和 .env.production 两个文件，分别用于开发和打包使用，环境变量相同的内容可以抽取到 .env 文件中用于全局。
/// <reference types="vite/client" />
// vite 环境变量 ts 语法提示
interface ImportMetaEnv {
// 页面访问前缀
readonly VITE_BASENAME: string;
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
vite.config.ts 配置中是无法直接使用 import.meta.env，使用下方这行代码。
const env = loadEnv(mode, process.cwd(), "");
总结
不知道读者有没有注意到，每篇文章末尾的参考，都是 官方文档。
其实一手的资料都在其项目对应的官方文档中。
众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。
参考
vite 在 vite.config.ts 配置中使用环境变量 官方文档
标签：GoWVP,form,react,文档,env,shadcn,vite From： https://blog.csdn.net/weixin_42324398/article/details/145270676