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

ixugo. edited this page 2025-02-10 10:05:45 +08:00

Table of Contents

• React-Hook-Form
• 关闭 Sheet
• 给 Button 加点动画
• React-Query useMutation
• vite env 配置
• 参考

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(), "");

总结

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

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

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

参考

[shadcn/ui sheet 官方文档](https://ui.shadcn.com/docs/components/sheet)

[shadcn/ui form 官方文档](https://ui.shadcn.com/docs/components/form)

[react-hook-form 官方文档](https://react-hook-form.com/get-started)

[zod 官方文档](https://zod.dev/?id=introduction)

[react query filters 官方文档](https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters)

[react query useMutation 官方文档](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation#usemutation)

[vite 环境变量配置 官方文档](https://cn.vite.dev/guide/env-and-mode.html#env-files)

[vite 在 vite.config.ts 配置中使用环境变量 官方文档](https://cn.vite.dev/config/#using-environment-variables-in-config)