shadcn之表单

前言

shadcn表单相关的了解，可知道 shadcn 目前推出了3种方式来处理表单（毕竟shadcn只做ui，要想处理好完整表单就涉及到可控、校验等问题）：react-hook-form、tanstack、useActionState

react-hook-form版本

'use client';// 导入表单验证库
import * as z from 'zod';
// 导入消息提示组件
import { toast } from 'sonner';
// 导入 UI 组件
import { Input } from '@repo/shadcn-comps/input';
import { Button } from '@repo/shadcn-comps/button';
import { Textarea } from '@repo/shadcn-comps/textarea';
import { Field, FieldError, FieldGroup, FieldLabel } from '@repo/shadcn-comps/field';
// 导入表单处理相关
import { zodResolver } from '@hookform/resolvers/zod';
import { Controller, useForm } from 'react-hook-form';// 定义表单验证规则
const formSchema = z.object({title: z.string().min(5, '标题至少需要5个字符。').max(32, '标题最多32个字符。'),description: z.string().min(10, '描述至少需要10个字符。').max(30, '描述最多30个字符。'),
});/*** 问题反馈表单组件* 使用 react-hook-form 进行表单管理，zod 进行表单验证*/
export default function BugReportForm() {// 初始化表单，配置验证器和默认值const form = useForm<z.infer<typeof formSchema>>({resolver: zodResolver(formSchema), // 使用 zod 验证器defaultValues: {title: '',description: '',},});// 表单提交处理函数function onSubmit(data: z.infer<typeof formSchema>) {toast.info(JSON.stringify(data, null, 2));}return (<div className="p-2 w-100">{/* 表单主体 */}<form id="form-rhf-demo" onSubmit={form.handleSubmit(onSubmit)}><FieldGroup>{/* title字段 - 使用 Controller 包装以集成 react-hook-form */}<Controllername="title"control={form.control}render={({ field, fieldState }) => (<Field data-invalid={fieldState.invalid}><FieldLabel htmlFor="form-rhf-demo-title">标题</FieldLabel><Input {...field} id="form-rhf-demo-title" aria-invalid={fieldState.invalid} placeholder="请输入" />{/* 显示验证错误信息 */}{fieldState.invalid && <FieldError errors={[fieldState.error]} />}</Field>)}/><Controllername="description"control={form.control}render={({ field, fieldState }) => (<Field data-invalid={fieldState.invalid}><FieldLabel htmlFor="form-rhf-demo-description">描述</FieldLabel><Textarea {...field} id="form-rhf-demo-description" placeholder="请输入" rows={6} className="min-h-24 resize-none" />{/* 显示验证错误信息 */}{fieldState.invalid && <FieldError errors={[fieldState.error]} />}</Field>)}/></FieldGroup></form>{/* 操作按钮组 */}<Field orientation="horizontal" className="mt-2"><Button type="button" variant="outline" onClick={() => form.reset()}>重置</Button><Button type="submit" form="form-rhf-demo">提交</Button></Field></div>);
}