?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。
表單處理一直是 web 應用的重中之重，今天來看一下 react 如何處理表單。
從處理方式來看，有兩種選擇，一是將表單處理交給 React，另一種則是自己來處理。
這兩種方式都離不開 react 本身實現的支持。
且對于自己來處理，可以使用第三方提供的組件，比如 react-hook-form 獲得更多的便利。
useState 和 useRef
表單的處理，離不開 react 的兩個 hook： useState 和 useRef。
useState
前面介紹過，useState 用來管理狀態。
在表單中，表單控件的狀態則可以通過 useState 來進行管理。
以注冊表單為例，如下：
import React, { useState } from 'react'; function RegisterForm() { const [mailValue, setMailValue] = useState(''); const [passwordValue, setPasswordValue] = useState(''); //如果有更多的表單控件 const handleSubmit = () => { // 提交表單 }; const handleInputChange = (e) => { setMailValue(e.target.value); setPasswordValue(e.target.value); //如果有更多的表單控件 }; return ( <div> <input value={mailValue} onChange={handleInputChange} /> <input value={passwordValue} onChange={handleInputChange} /> {/* 如果有更多的表單控件 */} <button onClick={handleSubmit}>Submit</button> </div> ); } export default RegisterForm;
這里通過 useState 對 name 和 mail 控件進行了狀態管理。
如果表單中有其它的控件，則按原樣增加相應的處理代碼。
上述代碼中的表單處理就交給 react 了，這樣創建出來的表單控件也被稱為 受控組件。
useRef
如果想要自己控制，則不能使用狀態來管理控件，這里就要使用 useRef，僅僅用于獲取值。
import React, { useRef } from 'react'; function RegisterFormNew() { const mailRef = useRef(null); const passwordRef = useRef(null); const handleSubmit = () => { const mailValue = passwordRef.current.value; const passwordValue = passwordRef.current.value; // 提交表單 console.log({ mailValue, passwordValue }); }; return ( <div> <input ref={mailRef} /> <input ref={passwordRef} /> <button onClick={handleSubmit}>Submit</button> </div> ); } export default RegisterFormNew;
上述代碼中，使用了 useRef，通過它能獲取到控件當前的值，但也僅此而。
這樣實現的控件，也被稱為非受控件組件，意思是不受 react 的控制。
既然不受 react 控制，也就意味著自己可以寫代碼對表單進行處理。
當然現實情況下，不用自己從頭寫，借助于強大的第三方組件，可以輕松實現對表單的處理。
react-hook-form
這里介紹一個輕便的控件 react-hook-form，對上述代碼進行修改之后如下。
import React from 'react'; import { useForm } from 'react-hook-form'; const RegisterFormNewHook = () => { const { register, handleSubmit, formState: { errors }, } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="email" {...register({ required: '請輸入郵箱。' })} /> {errors.email && <p>{errors.email.message}</p>} <input name="password" type="password" {...register({ required: '請輸入密碼。' })} /> {errors.password && <p>{errors.password.message}</p>} <button type="submit">提交</button> </form> ); }; export default RegisterFormNewHook;
為了展示這個組件的功能，寫了一點驗證在里面。
但即使是這樣，也能看到代碼非常的簡潔和易懂。
總結
最后來總結一下今天的內容要點：
- ?? 使用 useState 把表單交給 react 來處理，稱為受受控組件。
- ?? 使用 useRef 對表單進行處理，稱為非受控組件。
- ?? 第三方組件 react-hook-form 使用了鉤子方式提供了完善的表單處理。
該文章在 2024/12/12 10:43:11 編輯過
400 186 1886
