React-Hook-Form 是一个用于 React Web 和 Native 的高性能、灵活、易拓展、易于使用的表单校验库。在React中构建表单时我们可以使用该库，该库提供了许多方便的工具，而且不需要太多代码。
让我们看看如何在你自己的项目中使用 React-hook-form 来为你的React应用程序构建丰富的、有特色的表单。
首先，我们需要在react项目中安装该库
npm install react-hook-form
或
yarn add react-hook-form
然后在项目中我们需要先引入useForm钩子
import { useForm } from 'react-hook-form'
const styles = {
container: {
width: '80%',
margin: '0 auto'
},
input: {
width: '100%'
}
}const submit = (data) => {
console.log(data);
}
export default function App() {
const { register, handleSubmit } = useForm()
return (
<input {...register("username")} placeholder="Username" name='username' style={styles.input} />
<input {...register("email")} placeholder="Email" name='email' style={styles.input} />
<input {...register("password")} placeholder="Password" name='password' style={styles.input} />
Submit
)
}
我们从useForm中解构出register和handleSubmit，接下来我们看看register和handleSubmit有什么用
register
我们先来看看官方解释
register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })
此方法允许您注册输入或选择元素并将验证规则应用于 React Hook Form。验证规则都基于 HTML 标准，还允许自定义验证方法。
简单的说，register函数接收用户输入的值，然后去做相关的一些验证
我们可以看看他的几个属性
required:该属性设置为true后，表明该输入框值为必需，否则不能提交表单。在下面这个例子中，我们不输入任何值点击提交，鼠标会自动聚焦到那个空的输入框且无法提交
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit} = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<input name="firstname"{...register("username",{
required：true}}
/>
);
}
maxLength
顾名思义，输入框的最大长度，number类型
minLength
输入框的最小长度，number类型
max
该属性与maxlength不同，当input的type为number时，max可以限制你输入的最大数为多少，如果超过则不能提交表单
min
与max相反，限制输入最小数为多少
parttern
这是正则属性，会检查你输入的值是否合法
更多属性请前往官网查看React Hook Form - performant, flexible and extensible form library (react-hook-form.com)
handleSubmit
该函数主要是为了做一些参数处理的，他接受两个参数，一个是数据处理函数，一个是错误处理函数，我们可以利用该函数与上面的register函数做表单的数据验证与处理
借用一下官网案例
import React from "react";
import { useForm } from "react-hook-form";const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
export default function App() {
const { register, handleSubmit, formState: { errors }, formState } = useForm();
const onSubmit = async data => {
await sleep(2000);
console.log(data);
if (data.username === "Bill") {
alert(JSON.stringify(data));
} else {
alert("There is an error");
}
};return (
User Name
<input placeholder="Bill" {...register("username")} />
);
}
防止表单重复提交
第一种可以使用表单提交后禁用提交按钮的方式
const onSubmit = (event) => {
event.preventDefault();
// 表单提交逻辑
// ...
// 禁用提交按钮
event.target.submitButton.disabled = true;
};
第二种可以用数据状态来管理
const [isSubmitted, setIsSubmitted] = useState(false);
const onSubmit = (event) => {
event.preventDefault();
if (!isSubmitted) {
// 表单提交逻辑
// ...
setIsSubmitted(true);
}
如果遇到网络问题导致用户重复点击提交按钮，我们也可以使用防抖节流来阻止表单重复提交
首先我们自定义hooks
i
function useDebounceThrottleForm() {
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = (event) => {
event.preventDefault();
if (!isSubmitting) {
setIsSubmitting(true);
// 表单提交逻辑
// ...
// 在提交完成后重置isSubmitting状态
setTimeout(() => {
setIsSubmitting(false);
}, 500);
}
};
const debouncedHandleSubmit = debounce(handleSubmit, 500);
const throttledHandleSubmit = throttle(handleSubmit, 500);
useEffect(() => {
// 在组件卸载时取消防抖和节流函数的调用
return () => {
debouncedHandleSubmit.cancel();
throttledHandleSubmit.cancel();
};
}, []);
return {
isSubmitting,
handleSubmit: debouncedHandleSubmit, // 使用防抖函数处理表单提交
// handleSubmit: throttledHandleSubmit, // 或者使用节流函数处理表单提交
};
}
然后使用该hooks来实现上述需求
function MyForm() {
const { isSubmitting, handleSubmit } = useDebounceThrottleForm();
return (
{/* 表单内容 */}
提交
);
}
