{"content":{"title":"水分子社區（HOH）前端共學營 - 筆記(3)","body":"第一周第二課筆記 - Shadcn UI 的使用 (建立表格的例子)\r\n如果有看了上一篇的介紹，也看了一個簡單示例，相信大家對 Shadcn 都有初步了解。\r\n事不宜遲，馬上教大家利用 Shadcn 和其他工具做一個簡單的表格。\r\n而這個表格會配合 useForm 結合 zod 的運用。\r\n\r\n## 背景:\r\n假設已創建一個項目，相關步驟可參看上一篇文章 - 水分子社區（HOH）前端共學營 - 筆記(2) 的教學\r\n\r\n## 安裝部分:\r\n1. 需要用到 shadcn 中 form 的元件，要執行一個安裝指令。\r\n```\r\nnpx shadcn@latest add form\r\n```\r\n2. 需要用到 zod schema 來進行表單驗證，因此會利用 zodResolver 作為 useForm 的 resolver，所以要安裝 hookform/resolvers。\r\n```\r\nnpm i @hookform/resolvers\r\n```\r\n3. 需要使用 zod，它是以 TS 為主的型別聲明和驗證的庫。\r\n```\r\nnpm i zod\r\n```\r\n\r\n## 創建部分: \r\n1. 在 app 文件夾下創建一個新文件，名為 HohForm.tsx\r\n\r\n## 引用部分:\r\n```\r\n\"use client\"\r\n\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport { z } from \"zod\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n    Form,\r\n    FormControl,\r\n    FormDescription,\r\n    FormField,\r\n    FormItem,\r\n    FormLabel,\r\n    FormMessage,\r\n} from \"@/components/ui/form\"\r\nimport { Input } from \"@/components/ui/input\"\r\n```\r\n\r\n## 核心部分:\r\n1.使用 z.object 建立 Obejct Schema\r\n```\r\nconst formSchema = z.object({\r\n    github_account_name: z.string().min(5, {\r\n        message: \"github 用戶名稱 必須至少有5個數字或英文\",\r\n    }),\r\n})\r\n```\r\n> z.string().min(5, { xxx }): 字串的最小長度為 5 \r\nmessage: \"github 用戶名稱 必須至少有5個數字或英文: 如未達到要求會返回這個錯誤提示\r\nz.infer: 會將 schema 轉為 type 的格式\r\n> \r\n\r\n2. 建立 export function HohForm() {}\r\n```\r\nexport function HohForm() {\r\n/**/\r\n\r\nreturn ()\r\n\r\n}\r\n```\r\n\r\n3. 定義表格內容\r\n```\r\n    const form = useForm<z.infer<typeof formSchema>>({\r\n        resolver: zodResolver(formSchema),\r\n        defaultValues: {\r\n            github_account_name: \"\",\r\n        },\r\n    })\r\n```\r\n\r\n4. 定義提交功能\r\n```\r\n    function onSubmit(values: z.infer<typeof formSchema>) {\r\n        // 將會在 console 顯示提交的內容\r\n        console.log(values)\r\n    }\r\n```\r\n\r\n5. 建構 return 部分\r\n```\r\nreturn (\r\n        <Form {...form}>\r\n            <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\r\n                <FormField\r\n                    control={form.control}\r\n                    name=\"github_account_name\"\r\n                    render={({ field }) => (\r\n                        <FormItem>\r\n                            <FormLabel>github 用戶名稱</FormLabel>\r\n                            <FormControl>\r\n                                <Input placeholder=\"HOH frontend\" {...field} />\r\n                            </FormControl>\r\n                            <FormDescription>\r\n                               請在上方輸入你的 github 用戶名稱\r\n                            </FormDescription>\r\n                            <FormMessage />\r\n                        </FormItem>\r\n                    )}\r\n                />\r\n                <Button type=\"submit\">提交</Button>\r\n            </form>\r\n        </Form>\r\n    )\r\n```\r\n\r\n## 測試部分:\r\n1. 啟動項目\r\n```\r\nnpm run dev\r\n```\r\n\r\n2. 打開頁面\r\n```\r\nhttp://localhost:3000/\r\n```\r\n\r\n3. 打開開發人員工具的\"console\"，然後在頁面的框內輸入你的 github 用戶名稱，如下圖所示:\r\n例子: 在輸入\"YEUNG\"後，然後按\"提交\"，就可以在 console 即時查看的結果。\r\n```\r\n{github_account_name: 'YEUNG'}\r\n```\r\n![螢幕擷取畫面 2025-01-30 224628.png](https://img.learnblockchain.cn/attachments/2025/01/M2Vbhiaj679b90d94a18d.png)"},"author":{"user":"https://learnblockchain.cn/people/19478","address":null},"history":"bafkreidy7c4czunynbhsy3ozdmbnxqy7tv7dnfsaphhce7xelluaixzcdm","timestamp":1738249781,"version":1}