簡化 React 中的表單管理：useActionState 與 useRBoxForm

我將介紹我的f-box 函式庫中的React 19 new hook useActionState 與useRBoxFormuseActionState

與

useRBoxForm

FormState的比較-反應。

我將解釋每種表單狀態管理方法的特徵以及如何開始使用 useRBoxForm。

1. 目錄
簡介
介紹 useActionState
介紹 f-box-react 和 useRBoxForm
比較：可用性差異
安裝與設定 f-box-react

結論

介紹 React 19 的新鉤子 useActionState 簡化了表單提交及其結果狀態的管理。另一方面，我的函式庫 f-box-react
提供了一個更進階的表單管理鉤子，稱為

useRBoxForm

。

在本文中，我將比較這兩個鉤子並分享 useRBoxForm 如何幫助簡化和增強表單管理。

介紹 useActionState
React 19 引入了

useActionState

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>
  )
}

例如，這是使用 useRBoxForm 的範例：

使用 useRBoxForm，您可以清楚地分離更新表單狀態、處理驗證和顯示錯誤訊息的邏輯，使程式碼更易於管理。

比較：可用性差異

• 使用 useActionState

  
  

  簡單的設計
• 它在單一物件中管理表單提交結果，當您剛開始使用時，這非常容易理解。

  
  

  集中職責
• 將成功標誌、訊息和購物車大小全部集中在一個物件中可能會讓人很難知道隨著功能的增加在哪裡進行更改。

  
  

  挑戰擴充 當狀態變化或驗證變得複雜時，靈活適應會感覺很困難。

使用RBoxForm

• 角色清晰分離
  透過分別處理表單資料、驗證邏輯和錯誤訊息，可以清楚在哪裡進行更改。

• 易於使用
  由於每個功能都是獨立的，修改一個部分不會影響其他部分，因此保持整體程式碼簡單。

• 輸入安全與信心
  透過 TypeScript 為表單資料和驗證定義清晰的類型，意外錯誤的可能性就會降低，從而使開發更加順利。

• 可重複使用性
  一旦建立了管理表單的邏輯，就可以輕鬆地在不同表單中重複使用它。

總體而言，useRBoxForm 可讓您透過分離每個關注點來更輕鬆地管理複雜狀態。

安裝和設定 f-box-react

1.安裝f-box-react

您可以使用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>
  )
}

2. 基本使用

從 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中文網其他相關文章！