ReactJS - useFormState() 钩子_ReactJS 菜鸟教程

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

语法

useFormState(func, initialState)

参数

func - 当提交表单或按下按钮时，将调用函数fn。当我们调用该函数时，它将接收表单的先前状态（首先是我们传递的 initialState，然后是其前一个返回值）作为其第一个参数，然后是表单操作通常接收的参数。
initialState − 开始时的状态值。可以使用任何可序列化的值。首次调用操作后，将忽略此参数。

返回值

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

当前状态。它将匹配我们在第一次渲染期间传递的 initialState。它将与调用操作时返回的值匹配。
一个新动作，我们可以将其作为动作属性或formAction属性发送到表单中的任何按钮组件。

例子

示例 - Counter Increment Decrement App

在组件的顶层，使用 FormState 设置在执行表单操作时更新的组件状态。我们提供了一个现有的表单操作函数和一个初始状态来 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>
	 	);
}

输出

计数器2

例

在这个例子中，我们将制作一个允许用户提交产品反馈的应用程序。为了管理反馈表单并根据用户的输入显示消息，我们将使用 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 库中的 useFormState 钩子。因此，该应用程序在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 中用于将商品添加到购物车的基本表单处理机制。

局限性

当 UseFormState 与支持 React 服务器组件的框架一起使用时，它允许我们在客户端执行 JavaScript 之前使表单具有交互性。它类似于在没有服务器组件的情况下使用时的组件本地状态。
作为其第一个参数，给定给 useFormState 的函数接收一个额外的参数，即前一个或开始状态。这将更改签名，而不是在不使用 useFormState 的情况下直接用作表单操作。

总结

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

<< ReactJS - useFormStatus() 钩子 ReactJS - PureComponent 类 >>