【React】尝试使用React Hook Form进行重构
首先
某一天的事情
我：“哎呀，随着规格的变更，表单的项目也增加了呢…”
成员：“对于每个项目都声明了状态变量，所以代码量非常多。”
我觉得有什么办法可以写得更好吗？
成员: “好像使用React Hook Form可以写得很好”。
我能摸一下吗？
这个问题
React Hook Form是一个库，可以用于创建表单的状态管理和验证。
如果不使用React Hook Form
显示代码
导入{ FormLabel，Input，Button，VStack，Text } from’@ chakra-ui / react’
import React，{ ChangeEvent，useState } from’react’功能 App（）{
const [name，setName] = useState（””）
const [nameErr，setNameErr] = useState（””）
const [isNameErr，setIsNameErr] = useState（false）
导入{ FormLabel，Input，Button，VStack，Text } from’@ chakra-ui / react’
import React，{ ChangeEvent，useState } from’react’功能 App（）{
const [name，setName] = useState（””）
const [nameErr，setNameErr] = useState（””）
const [isNameErr，setIsNameErr] = useState（false）
const handleSubmit =（e：React.FormEvent ）=> {
e.preventDefault（）;
console.log（name）
}
const onChangeName =（e：ChangeEvent ）=> {
if（e.target.value.length === 0）{
setNameErr（”名前は必須です”）;
setIsNameErr（true）;
} else {
setNameErr（””）;
setIsNameErr（false）;
}
setName（e.target.value）
}
return（
在代码中，我们声明了许多状态变量和函数…
我们声明了三个状态变量，分别是“名字”的状态变量、错误消息的状态变量和验证的状态变量。
此外，我们还声明了一个根据状态显示错误消息的函数。
每当我们向输入表单中添加新项目时，声明这些变量将会变得非常繁琐。
我想尝试使用React Hook Form。
如果使用React Hook Form
在App函数中，我们使用了Chakra UI来创建了一个包含表单的页面。首先，我们导入了所需的组件和库，并定义了一个LoginForm接口，它包含了两个字段：name和password。然后，我们使用react-hook-form库初始化了一个表单，通过解构赋值获取了register、handleSubmit和errors等属性。我们在onSubmit函数中打印了表单数据。
接下来，构建了一个包含表单元素的VStack组件。在
由于代码的减少，它变得更加简洁。
验证条件包括姓名为空和至少四个字符的条件。
在输入字符时，我们会在超过四个字符时进行验证。你可以通过设置useForm的mode: “onChange”来实现这一点。
此外，当出现验证错误时，按下按钮也无法发送数据。
最后
重构工作似乎会进展顺利。
请参阅
