ReactJS - useFormState() Hook

useFormState 是 React 网站的一个有用工具。当我们想要根据填写表单时发生的情况更新网页上的某些内容时，我们会使用它。例如，我们可能希望在单击表单中的按钮时增加数字。

语法

useFormState(func, initialState)

参数

func − 当提交表单或按下按钮时，会调用函数 fn。当我们调用该函数时，它将接收表单的先前状态(首先是我们传递的 initialState，然后是其先前的返回值)作为其第一个参数，然后是表单操作通常接收的参数。

initialState −开始时状态的值。可以使用任何可序列化的值。首次调用操作后，将忽略此参数。

返回值

useFormState 生成一个只有两个值的数组 −

• 当前状态。它将匹配我们在第一次渲染期间传递的 initialState。它将匹配调用操作时返回的值。

• 我们可以将新操作作为 action 属性发送到表单组件，或将 formAction 属性发送到表单内的任何按钮组件。

示例

示例 − 计数器 增量 减量 应用

在组件的顶层，useFormState 设置在执行表单操作时更新的组件状态。我们为 useFormState 提供了一个现有的表单操作函数和一个初始状态，它返回一个新操作和最新的表单状态。最新的表单状态也会发送到我们指定的函数。

在这个新示例中，我们将使用 useFormState 创建一个基本计数器，当按下"减量"按钮时，该计数器会减量。

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
   return previousState + 1;
}

async function decrement(previousState, formData) {
   return previousState - 1;
}

export default function App({}) {
   const [state, incrementAction] = useFormState(increment, 0);
   const [state2, decrementAction] = useFormState(decrement, 0);
   
   return (
      <div>
         <form>
            <p>Counter: {state}</p>
            <button formAction={incrementAction}>Increment</button>
            <button formAction={decrementAction}>Decrement</button>
         </form>
      </div>
   );
}

输出

示例

在此示例中，我们将制作一个允许用户提交产品反馈的应用程序。为了管理反馈表单并根据用户的输入显示消息，我们将使用 useFormState。代码如下 −

actions.js

"use server";

export async function submitFeedback(prevState, queryData) {
   const feedback = queryData.get("feedback");
   if (feedback) {
      return "Thanks for your feedback!";
   } else {
      return "Please provide your feedback before submitting.";
   }
}

App.js

import { useFormState } from "react-dom";
import { submitFeedback } from "./actions.js";

function FeedbackForm() {
   const [message, formAction] = useFormState(submitFeedback, null);
   
   return (
      <form action={formAction}>
         <h2>Product Feedback</h2>
         <label>
            Your Feedback:
            <textarea name="feedback" />
         </label>
         <button type="submit">Submit Feedback</button>
         {message}
      </form>
   );
}

export default function App() {
   return (
      <div>
         <FeedbackForm />
      </div>
   );
}

输出

在上面的例子中，我们有一个 FeedbackForm 组件，允许用户提供产品反馈。它根据用户是否使用来自actions.js的submitFeedback操作提供反馈来显示一条消息。反馈表单由App组件呈现。根据需求，我们可以创建FeedbackForm组件的多个实例。

示例

让我们再看一个使用useFormState函数的例子。在这个应用程序中，我们将创建一个简单的在线商店，我们可以在其中将商品添加到购物车中。在主组件"AddToCartForm"中，我们有两个属性:itemID和itemTitle，表示商品的唯一ID和标题。在AddToCartForm内部，有一个表单，其中有一个用于输入商品ID的隐藏输入和一个用于将商品添加到购物车的按钮。该表单使用来自react-dom库的useFormStateHooks(钩子)。因此，应用程序在actions.js文件中使用了一个简单的服务器端设置。

import { useState } from "react";
import { useFormState } from "react-dom";
import { addToCart } from "./actions.js";

function AddToCartForm({itemID, itemTitle}) {
   const [message, formAction] = useFormState(addToCart, null);
   return (
      <form action={formAction}>
         <h2>{itemTitle}</h2>
         <input type="hidden" name="itemID" value={itemID} />
         <button type="submit">Add to Cart</button>
         {message}
      </form>
   );
}

export default function App() {
   return (
      <>
         <AddToCartForm itemID="1" itemTitle="Dynamic Programming: Models and App" />
         <AddToCartForm itemID="2" itemTitle="Soft Computing Techniques for Engineering Optimization" />
      </>
   )
}

actions.js

"use server";

export async function addToCart(prevState, queryData) {
   const itemID = queryData.get('itemID');
   if (itemID === "1") {
      return "Added to cart";
   } else {
      return "Couldn't add to cart: the item is sold out.";
   }
}

输出

总体而言，此应用展示了 React 中用于将商品添加到购物车的基本表单处理机制。

限制

• 当与支持 React 服务器组件的框架一起使用时，UseFormState 允许我们在客户端执行 JavaScript 之前使表单具有交互性。当不使用服务器组件时，它类似于组件本地状态。

• 作为其第一个参数，传递给 useFormState 的函数会收到一个额外的参数，即上一个或起始状态。这会更改签名，使其与不使用 useFormState 直接用作表单操作时不同。

摘要

useFormState 函数可帮助我们设置和管理组件内表单的行为。我们为其提供指定的操作函数和初始状态，它返回当前表单状态和可用于启动表单更新的新操作。

reactjs_reference_api.html