DAp28資訊網——每日最新資訊28at.com

一、action 支持異步回調

一個令人振奮的特性就是，在 React19 中，action 支持傳入異步回調函數。DAp28資訊網——每日最新資訊28at.com

例如如下代碼：DAp28資訊網——每日最新資訊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>

有了這個特性的支持，我們就可以非常方便的利用它來實現一些上傳邏輯。不過一個小小的需求就是，點擊提交之后，接口請求的過程中，我們希望按鈕處于禁用狀態，那應該怎么辦呢？DAp28資訊網——每日最新資訊28at.com

React 19 提供了名為 useFormStatus 的 hook 來幫助我們做到這個事情。DAp28資訊網——每日最新資訊28at.com

二、useFormStatus

和別的 hook 不同的是，我們需要從 react-dom 中獲取到它的引用。DAp28資訊網——每日最新資訊28at.com

import { useFormStatus } from "react-dom";

useFormStatus 能夠在 form 元素的子組件中，獲取到表單提交時的 pending 狀態和表單內容。DAp28資訊網——每日最新資訊28at.com

?DAp28資訊網——每日最新資訊28at.com

與 form 同屬于一個組件，獲取不到，只能是封裝后的子組件才能獲取到。DAp28資訊網——每日最新資訊28at.com

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

pending 為 true 時，表示請求正在進行。我們可以利用這個值的變化在提交按鈕上設置 Loading 樣式。DAp28資訊網——每日最新資訊28at.com

data 格式為 FormData，表示此次提交里表單的所有內容。DAp28資訊網——每日最新資訊28at.com

method 表示我們在提交時，所采用的請求方式，默認值為 get。DAp28資訊網——每日最新資訊28at.com

?DAp28資訊網——每日最新資訊28at.com

需要注意的是，提交方式并不需要通過如下方式設置，這樣做會報錯。DAp28資訊網——每日最新資訊28at.com

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

DAp28資訊網——每日最新資訊28at.com

這里主要是針對提交按鈕做的操作，因此我們需要單獨將提交按鈕相關的部分拿出來封裝成為一個子組件，并在子組件中利用 useFormStatus 獲取異步 action 的 pending 狀態。DAp28資訊網——每日最新資訊28at.com

代碼非常的簡單，如下所示：DAp28資訊網——每日最新資訊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 元素中使用該組件即可。DAp28資訊網——每日最新資訊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 可以很容易幫我們做到這一點。DAp28資訊網——每日最新資訊28at.com

實現非常簡單，我們將某一個字段單獨封裝到子組件中，利用 useFormStatus 提供的 pending 狀態來判斷是否禁用輸入，代碼如下：DAp28資訊網——每日最新資訊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 表單元素自身支持的特性實現更復雜的表單交互邏輯。DAp28資訊網——每日最新資訊28at.com

這里我們需要注意的是 action 與 onSubmit 的區別。onSubmit 會優先于 action 執行。并且，如果我們在 onSubmit 的回調函數中，使用了 preventDefault，action 回調將不會執行。DAp28資訊網——每日最新資訊28at.com

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

在 onSubmit 中，我們可以結合 state，通過控制數據的行為來自定義表單行為，而無需過多依賴 HTML 表單元素本身的能力。具體如何抉擇大家需要根據自身項目的需求情況來定。DAp28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-101273-0.htmlReact 新 Hook：UseFormStatus 使用詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 別做平庸Coder！掌握這十個架構絕技，讓你成為團隊MVP

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