表单验证是 web 开发的一个重要方面,可确保数据完整性并增强用户体验。在 react 生态系统中,我们看到了处理表单及其验证方式的重大演变。
- 在本博客中,我们将比较两种方法:传统表单验证和现代 react hook 表单库。
- 通过并排检查这些方法,我们将发现为什么 react hook form 已成为许多开发人员的首选解决方案。
react 中的传统表单验证
- 让我们首先看看 react 中表单验证的传统方法:
import react, { usestate } from "react"; const simpleform = () => { const [formdata, setformdata] = usestate({ firstname: "", lastname: "", email: "", password: "", // ... other fields }); const [errors, seterrors] = usestate({}); const [issubmitting, setissubmitting] = usestate(false); const handlechange = (e) => { const { name, value } = e.target; setformdata({ ...formdata, [name]: value, }); }; const handlesubmit = (e) => { e.preventdefault(); setissubmitting(true); const newerrors = {}; // validation logic if (!formdata.firstname) newerrors.firstname = "first name is required"; if (!formdata.lastname) newerrors.lastname = "last name is required"; if (!formdata.email.match(/^s+@s+$/i)) newerrors.email = "invalid email address"; if (!formdata.password.match(/^(?=.*[a-z])(?=.*[a-z])(?=.*d)(?=.*[@$!%*?&])[a-za-zd@$!%*?&]{8,}$/)) newerrors.password = "invalid password"; // ... more validation rules if (object.keys(newerrors).length > 0) { seterrors(newerrors); return; } // submit form data try { const response = await simulateapicall(formdata); console.log("success: ", response); } catch (error) { console.error(error); seterror({ root: error.message }); } finally { setissubmitting(false) } }; return (
登录后复制
{errors.firstname &&
{errors.firstname}
}
{errors.lastname &&
{errors.lastname}
}
{errors.email &&
{errors.email}
}
{errors.password &&
{errors.password}
}
{/* more form fields */}
);
};
采用这种传统方法
- 我们使用 usestate 钩子分别管理表单状态和错误状态。
- 我们手动处理表单字段的更改并在handlesubmit函数中实现自定义验证逻辑。
虽然这可行,但它涉及大量样板代码,对于较大的表单可能会变得很麻烦。
输入react hook form
- 现在,让我们看看如何使用 react hook form 实现相同的结果:
安装
npm install react-hook-form
登录后复制
import React from "react"; // useForm is the hook which is given by react-hook-form import { useForm } from "react-hook-form"; const ReactHookForm = () => { const { register, handleSubmit, setError, formState: { errors, isSubmitting }, } = useForm(); const onSubmit = (data) => { // Submit form data try { const response = await simulateApiCall(formData); console.log("Success: ", response); } catch (error) { console.error(error); setError({ root: error.message }); } }; return (
登录后复制
{errors.firstName &&
{errors.firstName.message}
}
{errors.lasttName &&
{errors.lasttName.message}
}
{errors.email &&
{errors.email.message}
}
{errors.firstName &&
{errors.firstName.message}
}
{/* More form fields */}
);
};
react hook form 的简单性
-
减少样板:react hook form 消除了手动状态管理的需要。表单数据和错误不再使用 usestate。
-
声明式验证:我们不编写命令式验证逻辑,而是在寄存器函数中声明验证规则。这使得代码更具可读性和可维护性。
-
自动错误处理:react hook form 自动跟踪错误并通过错误对象提供错误,无需手动进行错误状态管理。
-
性能:通过利用不受控制的组件,react hook form 最大限度地减少了重新渲染,从而带来更好的性能,特别是对于大型表单。
-
轻松集成:注册功能与您现有的输入元素无缝集成,只需对 jsx 进行最少的更改。
-
内置验证:内置了常见的验证规则,如 required、min、max、pattern,减少了对自定义验证函数的需求。
-
typescript 支持:react hook form 提供了出色的开箱即用的 typescript 支持,增强了表单中的类型安全性。
了解如何在具有更多输入字段的打字稿中处理react-hook-form
-
虽然 react 中的传统表单处理为您提供了细粒度的控制,但它通常会导致难以维护的冗长代码。
-
react hook form 显着简化了这个过程,提供了一种更具声明性和更有效的方式来处理表单及其验证。
感谢您的阅读…希望您今天学到了新东西:)
以上就是简化表单验证:React Hook 表单与传统方法的详细内容,更多请关注叮当号网其它相关文章!
文章来自互联网,只做分享使用。发布者:叮当,转转请注明出处:https://www.dingdanghao.com/article/665778.html