简化 React 中的表单管理：useActionState 与 useRBoxForm

我将介绍我的 f-box 库中的 React 19 new hook useActionState 和 useRBoxForm 之间的比较-反应。

我将解释每种表单状态管理方法的特征以及如何开始使用 useRBoxForm。

目录

1. 简介
2. 介绍 useActionState
3. 介绍 f-box-react 和 useRBoxForm
4. 比较：可用性差异
5. 安装和设置 f-box-react
6. 结论

介绍

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，这是一个专门为表单管理设计的钩子，它明确分离了表单数据、验证逻辑和错误消息处理，从而实现更干净、更可维护的表单处理。

例如，这是使用 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，您可以清楚地分离更新表单状态、处理验证和显示错误消息的逻辑，从而使代码更易于管理。

比较：可用性差异

使用 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中文网其他相关文章！