帥氣純真少年！日本最帥初中生選美冠軍出爐
日本第一帥哥初一生選美大賽冠軍現(xiàn)已正式出爐，冠軍是來自千葉縣的宗田悠良。日本一直熱衷于各種選美大賽，從“最美JK”起到“最美女星&r
一個令人振奮的特性就是，在 React19 中，action 支持傳入異步回調(diào)函數(shù)。
例如如下代碼：
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>有了這個特性的支持，我們就可以非常方便的利用它來實現(xiàn)一些上傳邏輯。不過一個小小的需求就是，點擊提交之后，接口請求的過程中，我們希望按鈕處于禁用狀態(tài)，那應(yīng)該怎么辦呢？
React 19 提供了名為 useFormStatus 的 hook 來幫助我們做到這個事情。
和別的 hook 不同的是，我們需要從 react-dom 中獲取到它的引用。
import { useFormStatus } from "react-dom";useFormStatus 能夠在 form 元素的子組件中，獲取到表單提交時的 pending 狀態(tài)和表單內(nèi)容。
?
與 form 同屬于一個組件，獲取不到，只能是封裝后的子組件才能獲取到。
const { pending, data, method, action } = useFormStatus();pending 為 true 時，表示請求正在進行。我們可以利用這個值的變化在提交按鈕上設(shè)置 Loading 樣式。
data 格式為 FormData，表示此次提交里表單的所有內(nèi)容。
method 表示我們在提交時，所采用的請求方式，默認值為 get。
?
需要注意的是，提交方式并不需要通過如下方式設(shè)置，這樣做會報錯。
<form method="post"></form>
這里主要是針對提交按鈕做的操作，因此我們需要單獨將提交按鈕相關(guān)的部分拿出來封裝成為一個子組件，并在子組件中利用 useFormStatus 獲取異步 action 的 pending 狀態(tài)。
代碼非常的簡單，如下所示：
function SubmitButton() { const {pending} = useFormStatus() return ( <div className="form_item"> <button className='primary' type='submit' disabled={pending} > {pending ? 'Submitting...' : 'Submit'} </button> </div> )}然后在 form 元素中使用該組件即可。
<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>通常情況下，我們也希望在表單提交時，不允許輸入內(nèi)容。useFormStatus 可以很容易幫我們做到這一點。
實現(xiàn)非常簡單，我們將某一個字段單獨封裝到子組件中，利用 useFormStatus 提供的 pending 狀態(tài)來判斷是否禁用輸入，代碼如下：
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 是結(jié)合 action 異步請求時使用的 hook，它們是對 HTML 表單能力的增強。因此我們可以借助他們與 HTML 表單元素自身支持的特性實現(xiàn)更復(fù)雜的表單交互邏輯。
這里我們需要注意的是 action 與 onSubmit 的區(qū)別。onSubmit 會優(yōu)先于 action 執(zhí)行。并且，如果我們在 onSubmit 的回調(diào)函數(shù)中，使用了 preventDefault，action 回調(diào)將不會執(zhí)行。
function onSubmit(e) { e.preventDefault() // ...}在 onSubmit 中，我們可以結(jié)合 state，通過控制數(shù)據(jù)的行為來自定義表單行為，而無需過多依賴 HTML 表單元素本身的能力。具體如何抉擇大家需要根據(jù)自身項目的需求情況來定。
本文鏈接：http://www.www897cc.com/showinfo-26-101273-0.htmlReact 新 Hook：UseFormStatus 使用詳解
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號