💡 如果还不了解 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 使用了钩子方式提供了完善的表单处理。