我將介紹我的f-box 函式庫中的React 19 new hook useActionState 與useRBoxFormuseActionState
與useRBoxForm
FormState的比較-反應。
介紹
React 19 的新鉤子 useActionState 簡化了表單提交及其結果狀態的管理。另一方面,我的函式庫 f-box-react
提供了一個更進階的表單管理鉤子,稱為
介紹 useActionState
React 19 引入了
import { useActionState } from "react" type FormState = { success?: boolean cartSize?: number message?: string } function addToCart(prevState: FormState, queryData: FormData) { const itemID = queryData.get("itemID") if (itemID === "1") { return { success: true, cartSize: 12, } } else { return { success: false, message: "The item is sold out.", } } } function AddToCartForm({ itemID, itemTitle, }: { itemID: string itemTitle: string }) { const [formState, formAction, isPending] = useActionState< FormState, FormData >(addToCart, {}) return ( <form action={formAction}> {/* Form content */} {formState?.success && ( <div>Item added to cart! Current cart size: {formState.cartSize}</div> )} {formState?.success === false && ( <div>Failed to add item: {formState.message}</div> )} </form> ) }
雖然 useActionState 提供了一種透過回呼函數更新表單狀態的簡單機制,但其缺點是
介紹 f-box-react 和 useRBoxForm f-box-react 是一個將 RBox
的響應式功能與 React 整合的函式庫。其功能之一是useRBoxForm
,這是一個專門為表單管理設計的鉤子,它明確分離了表單資料、驗證邏輯和錯誤訊息處理,從而實現更乾淨、更可維護的表單處理。
import { useRBoxForm } from "f-box-react" type Form = { itemID: string cartSize: number } const validate = (form: Form) => ({ itemID: [() => form.itemID === "1"], cartSize: [], }) function AddToCartForm({ itemID, itemTitle, }: { itemID: string itemTitle: string }) { const { form, edited, isPending, handleChange, handleValidatedSubmit, shouldShowError, } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate) const handleSubmit = handleValidatedSubmit(async (form) => { if (form.itemID === "1") { handleChange("cartSize", 12) } }) return ( <form onSubmit={handleSubmit}> <h2>{itemTitle}</h2> <button type="submit" disabled={isPending}> Add to Cart </button> {edited.itemID && (shouldShowError("itemID")(0) ? ( <div>Failed to add to cart: The item is sold out.</div> ) : ( <div>Item added to cart! Current cart size: {form.cartSize}</div> ))} </form> ) }
角色清晰分離
透過分別處理表單資料、驗證邏輯和錯誤訊息,可以清楚在哪裡進行更改。
易於使用
由於每個功能都是獨立的,修改一個部分不會影響其他部分,因此保持整體程式碼簡單。
輸入安全與信心
透過 TypeScript 為表單資料和驗證定義清晰的類型,意外錯誤的可能性就會降低,從而使開發更加順利。
可重複使用性
一旦建立了管理表單的邏輯,就可以輕鬆地在不同表單中重複使用它。
總體而言,useRBoxForm 可讓您透過分離每個關注點來更輕鬆地管理複雜狀態。
您可以使用npm或yarn安裝f-box-react:
import { useActionState } from "react" type FormState = { success?: boolean cartSize?: number message?: string } function addToCart(prevState: FormState, queryData: FormData) { const itemID = queryData.get("itemID") if (itemID === "1") { return { success: true, cartSize: 12, } } else { return { success: false, message: "The item is sold out.", } } } function AddToCartForm({ itemID, itemTitle, }: { itemID: string itemTitle: string }) { const [formState, formAction, isPending] = useActionState< FormState, FormData >(addToCart, {}) return ( <form action={formAction}> {/* Form content */} {formState?.success && ( <div>Item added to cart! Current cart size: {formState.cartSize}</div> )} {formState?.success === false && ( <div>Failed to add item: {formState.message}</div> )} </form> ) }
從 f-box-react 匯入 useRBoxForm 鉤子並在表單元件中使用它:
import { useRBoxForm } from "f-box-react" type Form = { itemID: string cartSize: number } const validate = (form: Form) => ({ itemID: [() => form.itemID === "1"], cartSize: [], }) function AddToCartForm({ itemID, itemTitle, }: { itemID: string itemTitle: string }) { const { form, edited, isPending, handleChange, handleValidatedSubmit, shouldShowError, } = useRBoxForm<Form>({ itemID, cartSize: 0 }, validate) const handleSubmit = handleValidatedSubmit(async (form) => { if (form.itemID === "1") { handleChange("cartSize", 12) } }) return ( <form onSubmit={handleSubmit}> <h2>{itemTitle}</h2> <button type="submit" disabled={isPending}> Add to Cart </button> {edited.itemID && (shouldShowError("itemID")(0) ? ( <div>Failed to add to cart: The item is sold out.</div> ) : ( <div>Item added to cart! Current cart size: {form.cartSize}</div> ))} </form> ) }
有關更詳細的用法和進階範例,請查看 GitHub 儲存庫或 https://f-box-docs.com 的官方文件。
React 中有很多管理表單狀態的方法。雖然 useActionState 因其簡單性而吸引人,但隨著複雜性的增加,它可能會變得笨拙。相較之下,f-box-react 中的 useRBoxForm 將表單資料、驗證和錯誤訊息分開,提供了更易於管理和更可擴展的解決方案。
希望這篇文章能讓您深入了解 f-box-react 的吸引力和用法。雖然還沒有廣為人知,但我鼓勵您嘗試!
以上是簡化 React 中的表單管理:useActionState 與 useRBoxForm的詳細內容。更多資訊請關注PHP中文網其他相關文章!