技術 Day 10 - 為什麼要用 React Hook Form

前言 昨天討論到 Uncontrolled Component 與 Controlled Component，了解到非受控元件因為是用原生的 HTML 輸入 t...

技術 [Day21]用 React 讓網站動起來：useForm 簡介

今天要來介紹一個第三方 api－React Hook Form ，這是一個處理表單的 api，可以幫助我們在 React 中更方便的處理表單。其中，會主要介紹...

技術 [Day22]用 React 讓網站動起來：更多 React Hook Form

昨天介紹了 useForm 的基本用法，今天來多介紹一些 React Hook Form 別的用法。 FormProvider 前幾天介紹了資料管理的 Cont...

技術 營養師不開菜單的第十五天 - 為什麼從 Formik 跳槽到 React-Hook-Form

React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...

技術 Day 18 - React Hook Form 做好你的表單驗證

前一篇文章示範了如何使用 Form 表單送出資料，不過這個表單並沒有做任何的驗證處理，例如：使用者沒有輸入資料、輸入的資料格式不正確等等，這些都是需要處理的，這...

技術 [Day27]我的 react 學習記錄 - react hook form

這篇文章的主要內容 簡單介紹 react hook form react hook form 今天要來簡單介紹處理表格輸入跟驗證的好幫手 react hook...

技術 Day 19 - 驗證輸入的文字是否正確

現在當選擇類別後，不管輸入什麼文字，結果都可以送出表單，並且產生錯誤的 QR code，這樣並不是我們想要的結果，所以這篇文章將會示範如何設定正規表達式來驗證輸...

技術 Day 21 - 將表單重構成元件（上）

現在 page.tsx 的程式碼已經有點多了，而且之後還要新增一個產生 PNG 的表單，所以現在就把原本產生 SVG 的表單重構成元件，這樣之後要新增表單的時候...

技術 Day 27: 使用 react-hook-form 高效管理表單提交與驗證

在現代 Web 應用開發中，表單的管理與驗證往往是開發過程中的一大挑戰。上一篇文章中，我們探討了如何追蹤使用者行為並優化應用體驗，而今天，我們的焦點是表單管理。...

技術 Day 07 - 結合 Zod 與 React Hook Form 實現簡潔的表單管理

為什麼需要使用 React Hook Form？ 在沒有使用的表單管理套件的情況下，需要定義許多狀態來處理表單邏輯和各種錯誤狀況。而使用像 React Hook...

技術 [Day 14] React 生態系：React Query 和 React Hook Form

今天我們要來聊聊 React 生態系中的兩個實用的套件：React Query 和 React Hook Form。 React Query： React Qu...

技術 Day 28: 無需後端，利用 EmailJS 輕鬆處理表單郵件

在前一篇文章中，我們實現了前端的聯絡表單，並展示了如何使用表單來捕獲用戶的輸入資料。今天，我們將進一步深入，展示如何使用 EmailJS 將表單資料發送到後端，...

技術 Day 29:表單數據持久化 — 優化用戶體驗

在我們的前幾篇文章中，我們已經介紹了如何使用表單來捕獲用戶輸入數據，並通過 EmailJS 發送表單數據。今天，我們將深入探討如何利用 sessionStora...