React 新 Hook：UseFormStatus 使用详解

f5P28资讯网——每日最新资讯28at.com

一、action 支持异步回调

一个令人振奋的特性就是，在 React19 中，action 支持传入异步回调函数。f5P28资讯网——每日最新资讯28at.com

例如如下代码：f5P28资讯网——每日最新资讯28at.com

async function formAction(formdata) {  const title = formdata.get('title')  const content = formdata.get('content')  // 简单校验  if (!title || !content) {    return;  }  await new Promise(resolve => setTimeout(resolve, 1000))  setPosts(posts => [...posts, {title,content}])}

<form action={formAction}>  ...</form>

有了这个特性的支持，我们就可以非常方便的利用它来实现一些上传逻辑。不过一个小小的需求就是，点击提交之后，接口请求的过程中，我们希望按钮处于禁用状态，那应该怎么办呢？f5P28资讯网——每日最新资讯28at.com

React 19 提供了名为 useFormStatus 的 hook 来帮助我们做到这个事情。f5P28资讯网——每日最新资讯28at.com

二、useFormStatus

和别的 hook 不同的是，我们需要从 react-dom 中获取到它的引用。f5P28资讯网——每日最新资讯28at.com

import { useFormStatus } from "react-dom";

useFormStatus 能够在 form 元素的子组件中，获取到表单提交时的 pending 状态和表单内容。f5P28资讯网——每日最新资讯28at.com

✓f5P28资讯网——每日最新资讯28at.com

与 form 同属于一个组件，获取不到，只能是封装后的子组件才能获取到。f5P28资讯网——每日最新资讯28at.com

const { pending, data, method, action } = useFormStatus();

pending 为 true 时，表示请求正在进行。我们可以利用这个值的变化在提交按钮上设置 Loading 样式。f5P28资讯网——每日最新资讯28at.com

data 格式为 FormData，表示此次提交里表单的所有内容。f5P28资讯网——每日最新资讯28at.com

method 表示我们在提交时，所采用的请求方式，默认值为 get。f5P28资讯网——每日最新资讯28at.com

✓f5P28资讯网——每日最新资讯28at.com

需要注意的是，提交方式并不需要通过如下方式设置，这样做会报错。f5P28资讯网——每日最新资讯28at.com

<form method="post"></form>

f5P28资讯网——每日最新资讯28at.com

这里主要是针对提交按钮做的操作，因此我们需要单独将提交按钮相关的部分拿出来封装成为一个子组件，并在子组件中利用 useFormStatus 获取异步 action 的 pending 状态。f5P28资讯网——每日最新资讯28at.com

代码非常的简单，如下所示：f5P28资讯网——每日最新资讯28at.com

function SubmitButton() {  const {pending} = useFormStatus()    return (    <div className="form_item">      <button        className='primary'        type='submit'        disabled={pending}      >        {pending ? 'Submitting...' : 'Submit'}      </button>          </div>  )}

然后在 form 元素中使用该组件即可。f5P28资讯网——每日最新资讯28at.com

<form actinotallow={formAction} method="post">  <div className="form_item">    <div className="label">Title</div>    <input name='title' type="text" placeholder='Enter title' />  </div>  <div className="form_item">    <div className="label">Name</div>    <input name='content' type="text" placeholder='Enter you name' />  </div>    <SubmitButton /></form>

四、案例二：提交时禁止输入内容

通常情况下，我们也希望在表单提交时，不允许输入内容。useFormStatus 可以很容易帮我们做到这一点。f5P28资讯网——每日最新资讯28at.com

实现非常简单，我们将某一个字段单独封装到子组件中，利用 useFormStatus 提供的 pending 状态来判断是否禁用输入，代码如下：f5P28资讯网——每日最新资讯28at.com

function Input2({required, name}) {  const {pending} = useFormStatus()  return (    <div className="form_item">      <div className="label">Name</div>      <input        name={name}        type="text"        placeholder='Enter you name'        disabled={pending}      />    </div>  )}

<form action={formAction}>  <div className="form_item">    <div className="label">Title</div>    <input name='title' type="text" placeholder='Enter title' />  </div>  <Input2 required name='content' />  <SubmitButton /></form>

五、总结

useFormStatus 是结合 action 异步请求时使用的 hook，它们是对 HTML 表单能力的增强。因此我们可以借助他们与 HTML 表单元素自身支持的特性实现更复杂的表单交互逻辑。f5P28资讯网——每日最新资讯28at.com

这里我们需要注意的是 action 与 onSubmit 的区别。onSubmit 会优先于 action 执行。并且，如果我们在 onSubmit 的回调函数中，使用了 preventDefault，action 回调将不会执行。f5P28资讯网——每日最新资讯28at.com

function onSubmit(e) {  e.preventDefault()  // ...}

在 onSubmit 中，我们可以结合 state，通过控制数据的行为来自定义表单行为，而无需过多依赖 HTML 表单元素本身的能力。具体如何抉择大家需要根据自身项目的需求情况来定。f5P28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-101273-0.htmlReact 新 Hook：UseFormStatus 使用详解

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 别做平庸Coder！掌握这十个架构绝技，让你成为团队MVP

下一篇： 线程池遇到父子任务，有大坑，要注意！