GB/T28181 开源日记[5]：使用 react-hook-form 完成表单

本文链接：https://blog.youkuaiyun.com/weixin_42324398/article/details/145270676

服务端源代码 github.com/gowvp/gb28181
前端源代码 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(), "");

总结

不知道读者有没有注意到，每篇文章末尾的参考，都是 官方文档。

其实一手的资料都在其项目对应的官方文档中。

众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。

参考

react query filters 官方文档

react query useMutation 官方文档

vite 环境变量配置官方文档

vite 在 vite.config.ts 配置中使用环境变量官方文档