?? 如果還不了解 HTML 、 CSS和JS，可以參考本號(hào)下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

表單處理一直是 web 應(yīng)用的重中之重，今天來(lái)看一下 react 如何處理表單。

從處理方式來(lái)看，有兩種選擇，一是將表單處理交給 React，另一種則是自己來(lái)處理。

這兩種方式都離不開(kāi) react 本身實(shí)現(xiàn)的支持。

且對(duì)于自己來(lái)處理，可以使用第三方提供的組件，比如 react-hook-form 獲得更多的便利。

useState 和 useRef

表單的處理，離不開(kāi) react 的兩個(gè) hook： useState 和 useRef。

useState

前面介紹過(guò)，useState 用來(lái)管理狀態(tài)。

在表單中，表單控件的狀態(tài)則可以通過(guò) useState 來(lái)進(jìn)行管理。

以注冊(cè)表單為例，如下：

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; 

這里通過(guò) useState 對(duì) name 和 mail 控件進(jìn)行了狀態(tài)管理。

如果表單中有其它的控件，則按原樣增加相應(yīng)的處理代碼。

上述代碼中的表單處理就交給 react 了，這樣創(chuàng)建出來(lái)的表單控件也被稱為 受控組件。

useRef

如果想要自己控制，則不能使用狀態(tài)來(lái)管理控件，這里就要使用 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，通過(guò)它能獲取到控件當(dāng)前的值，但也僅此而。

這樣實(shí)現(xiàn)的控件，也被稱為非受控件組件，意思是不受 react 的控制。

既然不受 react 控制，也就意味著自己可以寫(xiě)代碼對(duì)表單進(jìn)行處理。

當(dāng)然現(xiàn)實(shí)情況下，不用自己從頭寫(xiě)，借助于強(qiáng)大的第三方組件，可以輕松實(shí)現(xiàn)對(duì)表單的處理。

react-hook-form

這里介紹一個(gè)輕便的控件 react-hook-form，對(duì)上述代碼進(jìn)行修改之后如下。

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: '請(qǐng)輸入郵箱。'         })}       />       {errors.email && <p>{errors.email.message}</p>}       <input         name="password"         type="password"         {...register({ required: '請(qǐng)輸入密碼。' })}       />       {errors.password && <p>{errors.password.message}</p>}       <button type="submit">提交</button>     </form>   ); };  export default RegisterFormNewHook; 

為了展示這個(gè)組件的功能，寫(xiě)了一點(diǎn)驗(yàn)證在里面。

但即使是這樣，也能看到代碼非常的簡(jiǎn)潔和易懂。

總結(jié)

最后來(lái)總結(jié)一下今天的內(nèi)容要點(diǎn)：

• ?? 使用 useState 把表單交給 react 來(lái)處理，稱為受受控組件。
• ?? 使用 useRef 對(duì)表單進(jìn)行處理，稱為非受控組件。
• ?? 第三方組件 react-hook-form 使用了鉤子方式提供了完善的表單處理。