React?Hook?Form?優(yōu)雅處理表單使用指南
受控組件與非受控組件
受控組件
先說說受控組件，以 input 為例:
const [value,setValue] = useState('')
<input value={value} onChange={(e)=> setValue(e.target.value)} />
在上面的代碼中，我們通過通過自己維護一個 state 來獲取或更新 input 輸入的值，以這種方式控制取值的 表單輸入元素 就叫做 受控組件。
非受控組件
那么什么是非受控組件呢？在 React 中，非受控組件是指表單元素的值由 DOM 節(jié)點直接處理，而不是由 React 組件來管理。如下例：
import React, { useRef } from 'react';
function UncontrolledForm() {
const nameInputRef = useRef(null);
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
function handleSubmit(event) {
console.log('Name:', nameInputRef.current.value);
console.log('Email:', emailInputRef.current.value);
console.log('Password:', passwordInputRef.current.value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={nameInputRef} />
</label>
<label>
Email:
<input type="email" ref={emailInputRef} />
</label>
<label>
Password:
<input type="password" ref={passwordInputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
}
在這個例子中，我們使用 useRef Hook 創(chuàng)建了一個 ref 對象，并將其賦值給每個 input 元素的 ref 屬性。在 handleSubmit 函數(shù)中，我們使用 ref.current.value 來獲取每個 input 元素的值。這里的每個input 元素都是非受控組件，因為它們的值由 DOM 節(jié)點直接處理，而不是由 React 組件來管理。
當然，這意味著當用戶輸入數(shù)據(jù)時，React 無法追蹤表單元素的值。因此，當您需要訪問表單元素的值時，您需要使用DOM API來獲取它們。
為什么需要非受控組件
在 React 中，通常使用受控組件來處理表單。受控組件表單元素的值由 React 組件來管理，當表單數(shù)據(jù)發(fā)生變化時，React 會自動更新組件狀態(tài)，并重新渲染組件。這種方式可以使得表單處理更加可靠和方便，也可以使得表單數(shù)據(jù)和應用狀態(tài)之間保持一致。
但在實際的開發(fā)中，表單往往是最復雜的場景，有的表單有數(shù)十個字段，如果使用受控組件去構建表單，那么我們就需要維護大量 state，且 React 又不像 Vue 可以通過雙向綁定直接修改 state 的值，每一個表單字段還需要定義一下 onChange 方法。因此在維護復雜表單時，使用受控組件會有很大的額外代碼量。
為了解決受控組件帶來的問題，我們可以使用非受控組件來構建表單。受控組件主要有以下三個優(yōu)點
- 可以減少組件的 代碼量和復雜度，因為非受控組件不需要在組件狀態(tài)中保存表單數(shù)據(jù)。
- 可以更好地 處理大量表單數(shù)據(jù)，因為非受控組件可以讓您直接操作DOM元素，而不需要將所有表單數(shù)據(jù)存儲在組件狀態(tài)中。
- 可以更容易地與第三方 JavaScript 庫和表單處理代碼集成，因為非受控組件使您能夠使用 DOM API 或 ref 直接訪問表單元素，而不是在 React 中重新實現(xiàn)所有的表單處理邏輯。
React Hook Form 是什么？
React Hook Form 是一個基于 React 的 輕量級表單驗證庫。它使用了 React Hook API，讓表單驗證變得簡單、易用、高效。React Hook Form 的主要目標是提供一個簡單易用的表單驗證解決方案，同時還能保持高性能和低開銷。
React Hook Form 的特點都在官網(wǎng)首頁 react-hook-form.com 中以可交互的形式展示，包括了以下幾點：
- 通過 React Hook 的方式減少使用時的代碼量，簡單易上手，并且移除了不必要的重復渲染：
- 隔離重復渲染，自組件重新渲染時不會觸發(fā)父組件或兄弟組件的重新渲染：
- 訂閱機制，與上一點相似，能夠訂閱單個輸入和表單狀態(tài)更新，而無需重新呈現(xiàn)整個表單：
- 組件渲染速度足夠快，而且代碼庫非常小，壓縮后只有幾 KB 大小，不會對頁面性能造成任何影響：
React Hook Form 的使用姿勢
數(shù)據(jù)收集
先看看最基礎的表單實現(xiàn)：
import React from "react";
import { useForm } from "react-hook-form";
function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName")} />
<input {...register("lastName")} />
<button type="submit">Submit</button>
</form>
);
}
咱們來分析一下這段代碼：
- 使用
useForm函數(shù)創(chuàng)建一個表單對象，該函數(shù)返回一個包含register和handleSubmit等方法的對象。 - 在表單中定義兩個輸入框，使用
register函數(shù)注冊表單輸入組件，并指定組件的名稱為firstName和lastName。 - 使用 React Hook Form 提供的
handleSubmit函數(shù)來管理表單的提交和數(shù)據(jù)驗證。
這里我們不需要定義任何 state 即可在 submit 時獲取到表單中的數(shù)據(jù)，接下來我們補充一下基本的表單驗證和錯誤提示：
import React from "react";
import { useForm } from "react-hook-form";
function MyForm() {
const onSubmit = (data) => {
console.log(data);
};
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName", { required: true })} />
{errors.firstName && <p>First name is required.</p>}
<input {...register("lastName", { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<button type="submit">Submit</button>
</form>
);
}
咱們再分析一下這段代碼：
register函數(shù)中可以指定表單輸入組件的 驗證規(guī)則 ，例如使用required規(guī)則來驗證輸入框的必填項。- 在表單提交處理函數(shù)中，可以調(diào)用 React Hook Form 提供的
handleSubmit函數(shù)來自動執(zhí)行表單驗證，并返回驗證結果。只有表單驗證通過才會執(zhí)行onSubmit方法。 - 如果表單驗證失敗，可以使用
errors對象來獲取每個表單輸入組件的驗證錯誤信息，并在 UI 上顯示錯誤提示。
register 函數(shù)是用來注冊表單輸入組件的，當組件注冊之后，React Hook Form 會自動收集該組件的值，并根據(jù)驗證規(guī)則進行驗證。 register 函數(shù)會返回一個對象，其中包含了一些屬性和方法，例如：
const { ref, onChange, onBlur, name } = register("firstName");
ref 屬性是一個引用，指向該輸入組件的 DOM 元素，onChange 和 onBlur 是回調(diào)函數(shù)，用于處理該組件的值變化和失去焦點事件，name 是該組件的名稱。
register 函數(shù)內(nèi)部會創(chuàng)建一個管理表單輸入組件的對象，包含了該組件的名稱、引用、驗證規(guī)則等信息。同時，還會將該對象保存在 React Hook Form 內(nèi)部的一個數(shù)據(jù)結構中。
在表單提交時，React Hook Form 會遍歷管理的所有表單輸入組件，并收集它們的值，并根據(jù)其注冊時定義的驗證規(guī)則進行驗證。
到這里，一個最基本的表單驗證及提交就已經(jīng)實現(xiàn)了。當然，在實際開發(fā)中，表單之所以復雜是由于各種條件渲染及表單嵌套引起的，那么我們接下來再看看使用 React Hook Form 如何處理這些場景。
表單嵌套
還是一樣，先看看示例：
父級表單：
// ParentForm.jsx
import React from "react";
import { useForm, FormProvider } from "react-hook-form";
import ChildForm from "./ChildForm";
function ParentForm() {
const methods = useForm();
const { register, handleSubmit, formState: { errors } } = methods;
const onSubmit = (data) => {
console.log(data);
};
return (
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<h2>Parent Form</h2>
<label htmlFor="firstName">First Name</label>
<input {...register("firstName", { required: true })} />
{errors.firstName && <p>First name is required.</p>}
<label htmlFor="lastName">Last Name</label>
<input {...register("lastName", { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<ChildForm/>
<button type="submit">Submit</button>
</form>
</FormProvider>
);
}
export default ParentForm;
子級表單：
import React from "react";
import { useFormContext } from "react-hook-form";
function ChildForm() {
const { register, errors } = useFormContext();
return (
<div>
<h2>Child Form</h2>
<label htmlFor="childFirstName">Child First Name</label>
<input {...register("child.firstName", { required: true })} />
{errors.child?.firstName && <p>Child first name is required.</p>}
<label htmlFor="childLastName">Child Last Name</label>
<input {...register("child.lastName", { required: true })} />
{errors.child?.lastName && <p>Child last name is required.</p>}
</div>
);
}
export default ChildForm;
分析一下這兩個組件的代碼：
在 ParentForm 組件中，我們使用 useForm hook 來獲取表單的注冊函數(shù)、表單狀態(tài)等信息，并使用 FormProvider 組件將其傳遞給所有的子組件。
在 ChildForm 組件中，我們使用了 useFormContext hook 來獲取父表單的注冊函數(shù)和表單狀態(tài)。
這里的兩個表單組件間并不需要咱們?nèi)为毝x props ，只需要將 useFormContext 與 FormProvider 搭配使用，就可以將一個嵌套表單的邏輯分離成多個組件進行處理，且可以在父級組件提交時統(tǒng)一獲取并處理數(shù)據(jù)。
FormProvider 是 React Hook Form 提供的一個組件，用于在 React 組件樹中向下傳遞 useForm hook 的實例。它創(chuàng)建了一個 React Context，并將 useForm hook 的實例作為 Context 的值，然后通過 Context.Provider 組件將這個值傳遞給所有子組件.
而 useFormContext 則可以在子組件中獲取到 FormProvider 提供的 useForm hook 的返回值。在使用 useFormContext 時，不需要手動使用 Context.Provider 將值傳遞給子組件，而是可以直接從 useFormContext 中獲取，簡化嵌套表單的代碼邏輯。
條件判斷
import React from "react";
import { useForm } from "react-hook-form";
function ExampleForm() {
const { register, handleSubmit, watch } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="hasAge">Do you have an age?</label>
<select {...register("hasAge")}>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
{watch("hasAge") === "yes" && (
<>
<label htmlFor="age">Age</label>
<input {...register("age", { required: true, min: 18 })} />
{watch("age") && <p>You must be at least 18 years old.</p>}
</>
)}
<button type="submit">Submit</button>
</form>
);
}
export default ExampleForm;
我們在 hasAge 輸入框上使用了一個簡單的條件渲染：只有當用戶選擇了 "Yes" 時，才會渲染 age 輸入框。然后使用 watch 函數(shù)來監(jiān)聽輸入框的值，并在輸入的值小于 18 時顯示相應的錯誤信息。
watch 函數(shù)用來監(jiān)聽指定的輸入并返回它們的值。在渲染輸入值和進行條件渲染時經(jīng)常用到。
表單列表
import React from "react";
import { useForm, useFieldArray } from "react-hook-form";
function ListForm() {
const { register, control, handleSubmit } = useForm({
defaultValues: {
list: [{ name: "" }, { name: "" }, { name: "" }]
}
});
const { fields, append, remove } = useFieldArray({
control,
name: "list"
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<input
{...register(`list.${index}.name`, {
required: "This field is required"
})}
defaultValue={field.name}
/>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
))}
<button type="button" onClick={() => append({ name: "" })}>
Add Item
</button>
<button type="submit">Submit</button>
</form>
);
}
export default ListForm;
分析一下上邊這段代碼：
- 在這個示例中，我們使用了
useForm和useFieldArrayhook 來處理一個表單列表。其中list屬性是一個包含 3 個空對象的數(shù)組。 - 使用
fields.map方法遍歷fields數(shù)組，渲染出每一個列表項。 - 使用
remove方法為每個列表項添加了一個 "Remove" 按鈕，使得用戶可以刪除不需要的列表項。我們還使用append方法添加了一個 "Add Item" 按鈕，可以添加新的列表項。
這段代碼的核心就是 useFieldArray，它專門用于處理表單列表的場景，使用時我們將 useForm 返回的 control 傳入 useFieldArray hook 中，并為這個列表定義一個名字，hook 會為我們返回一些操作列表的方法，在遍歷渲染列表時，我們將每一個子項單獨進行注冊就可以實現(xiàn)表單列表的動態(tài)數(shù)據(jù)更改了。
需要注意的是，當使用 useFieldArray 處理表單中的數(shù)組字段時，每個字段都必須有一個 唯一的 key 值，這樣才能正確地進行數(shù)組的添加、刪除、更新等操作。如果數(shù)組中的字段沒有 key 值，useFieldArray 會自動為每個字段生成一個隨機的 key 值。
在內(nèi)部實現(xiàn)上，useFieldArray 使用了 useFormContext 將 FormProvider 提供的 register、unregister 和 setValue 函數(shù)傳遞給了 useFieldArray，然后在 useFieldArray 內(nèi)部維護一個數(shù)組 state，保存當前的數(shù)組值和對數(shù)組的操作。
第三方組件
當需要與第三方UI組件（如<DatePicker />、<Select />、<Slider />等）集成時，如果使用register 注冊這些第三方UI組件，可能會遇到如無法正確更新表單數(shù)據(jù)、錯誤處理、性能差等問題。
因此，使用Controller 是一種更好的解決方案，可以將表單數(shù)據(jù)與 React Hook Form 狀態(tài)管理集成在一起，并使用render 函數(shù)來直接渲染第三方UI組件。下面放個例子：
import React from "react";
import { useForm, Controller } from "react-hook-form";
import { TextField, Button } from "@material-ui/core";
function ControllerForm() {
const { control, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="firstName"
control={control}
defaultValue=""
rules={{ required: true }}
render={({ field }) => (
<TextField label="First Name" {...field} />
)}
/>
<Controller
name="lastName"
control={control}
defaultValue=""
rules={{ required: true }}
render={({ field }) => (
<TextField label="Last Name" {...field} />
)}
/>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>
);
}
export default ControllerForm;
control 是一個對象，它提供了一些方法和屬性，通過使用 control，我們可以將 React Hook Form 中的數(shù)據(jù)與實際渲染的表單組件進行綁定，從而讓 React Hook Form 管理表單中所有的輸入和校驗邏輯。
field 是 <Controller> 組件通過 render 回調(diào)函數(shù)傳遞給其子組件的一個對象，field 對象中包含了一些屬性，如 value、onChange、onBlur 等，這些屬性傳遞給子組件，用于設置和更新表單控件的值，以及處理表單控件的事件，如用戶輸入、聚焦、失焦等。
Controller的好處是可以將表單數(shù)據(jù)和表單狀態(tài)統(tǒng)一管理，同時避免了對表單數(shù)據(jù)的手動處理。此外，它還可以優(yōu)化表單的渲染性能，并提供更好的錯誤處理機制，因為它可以自動處理錯誤消息和驗證規(guī)則。
Typescript 支持
React Hook Form 提供了完整的 TypeScript 支持：
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
firstName: string;
lastName: string;
age: number;
};
function MyForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName", { required: true })} />
{errors.firstName && <span>This field is required</span>}
<input {...register("lastName", { required: true })} />
{errors.lastName && <span>This field is required</span>}
<input {...register("age", { required: true, min: 18 })} />
{errors.age && (
<span>
{errors.age.type === "required"
? "This field is required"
: "You must be at least 18 years old"}
</span>
)}
<button type="submit">Submit</button>
</form>
);
}
我們使用 FormValues 類型定義表單數(shù)據(jù)類型，并在 useForm 鉤子中使用 FormValues 泛型接口。這使得我們可以在注冊表單控件時提供正確的類型定義，并在 handleSubmit 函數(shù)中提供正確的表單數(shù)據(jù)類型。還可以使用泛型來定義錯誤消息的類型，可以用于準確地描述表單控件的錯誤狀態(tài)，并提供適當?shù)腻e誤消息。提高代碼的可讀性和可維護性。
總結
除了上述的一些表單使用姿勢，在官方的 react-hook-form.com/advanced-us… 頁面還可以看到一些高級特性的示例，例如 Schema 解析為表單，實現(xiàn)表單組件測試，表單與 API 間的數(shù)據(jù)轉換 等等。
總的來說，React Hook Form 提供了一種簡單、靈活的方式來管理表單狀態(tài)，支持非受控組件方式以及各種復雜的表單場景，同時也提供了 Typescript 支持，是一個值得嘗試的表單管理庫。
以上就是React Hook Form 優(yōu)雅處理表單使用指南的詳細內(nèi)容，更多關于React Hook Form處理表單的資料請關注腳本之家其它相關文章！
相關文章
基于visual studio code + react 開發(fā)環(huán)境搭建過程
今天通過本文給大家分享基于visual studio code + react 開發(fā)環(huán)境搭建過程，本文給大家介紹的非常詳細，包括react安裝問題及安裝 Debugger for Chrome的方法，需要的朋友跟隨小編一起看看吧2021-07-07
這篇文章主要為大家介紹了ahooks?useRequest的源碼精讀解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-08-08
在V6版本中，<Switch>組件被替換成<Routes>組件，同時，component屬性被element屬性替換，這篇文章主要介紹了react-router?v6新特性總結,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了react的滑動圖片驗證碼組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要為大家介紹了React Fiber中面試官最關心的技術話題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題
這篇文章主要介紹了解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
顏色選擇器是一個用于選擇和調(diào)整顏色的工具,它可以讓用戶選擇他們喜歡的顏色,本文主要介紹了React實現(xiàn)隨機顏色選擇器的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細介紹如何用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法，文中有詳細的代碼示例，對我們學習有一定的幫助,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-10-10