React Form Hook

React Form Hook是一个基于React Hooks的表单状态管理工具，它使表单的数据管理和验证变得更加简单。

安装方式

使用npm来安装React Form Hook。

npm install react-hook-form

使用方法

• 导入 useForm 函数

import { useForm } from 'react-hook-form';

• 在组件函数中调用 useForm() 函数

const App = () => {
  const { register, handleSubmit, errors } = useForm(); // 初始化form状态

  const onSubmit = (data) => console.log(data); // 提交表单

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register} />
      {errors.name && <span>必须填写</span>}
      
      <input type="email" name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <span>输入无效</span>}
      
      <input type="submit" />
    </form>
  );
}

• 在FormControl中使用 register 函数

<input type="text" name="username" ref={register} />

使用 register 函数设置组件与form数据的绑定，当组件状态改变时，表单中的数据也会更新。

表单验证

React Form Hook提供了几种简单的表单验证方式：

• required - 必填项

<input type="text" name="firstName" ref={register({ required: true })} />

• pattern - 正则表达式验证

<input type="text" name="email" ref={register({ pattern: /^\S+@\S+$/i })} />

• min/max - 最小/大值验证

<input type="text" name="age" ref={register({ min: 18, max: 99 })} />

• validate - 自定义验证方法

const validateUsername = async (value) => {
  const result = await /* some api to check if username is already taken */;
  return !result; // 如果已存在，则返回false
};

<input type="text" name="username" ref={register({ validate: validateUsername })} />

提交表单

在使用useForm()函数初始化表单状态之后，当表单组件中的数据满足条件之后，就可以通过调用handleSubmit()函数来提交表单数据了。

const onSubmit = (data) => console.log(data); // 提交表单

<form onSubmit={handleSubmit(onSubmit)}>
  <input type="text" name="name" ref={register} />
  <input type="submit" />
</form>

结语

React Form Hook就是这样一个简单却功能强大的表单管理工具，它可以大大减少React表单开发的烦恼，让开发变得更加高效和愉快。