使用TypeScript的React Hook Form入门这是关于React Hook Form系列文章的第一篇，顾名

这是关于React Hook Form系列文章的第一篇，顾名思义，它是在React中构建表单的一个有用的库：

在这篇文章中，我们将建立一个表单来捕获一个名字、一个电子邮件地址和一个分数。该表单将有一些简单的验证规则，并在提交时将其数据输出到控制台。

安装

React Hook Form的软件包名称是react-hook-form ，所以我们可以用下面的命令把它安装到我们的项目中：

npm install react-hook-form

该包包括TypeScript类型，所以不需要为此进行额外的安装。

基本表单

让我们从定义表单数据的类型开始：

type PersonScore = {
  name: string;
  email: string;
  score: number;
};

所以，我们想在表单中捕获一个名字、一个电子邮件地址和一个分数。

让我们创建我们的基本表单JSX：

export const PersonScoreForm = () => {
  return (
    <form>
      <div className="field">
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
        />
      </div>
      <div className="field">
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
        />
      </div>
      <div className="field">
        <label htmlFor="score">Score</label>
        <input
          type="number"
          id="score"
          name="score"
        />
      </div>
      <button type="submit">Save</button>
    </form>
  );
};

还没有React Hook Form的迹象--只是一个基本的表单。所以，让我们通过注册字段开始使用React Hook Form：

import { useForm } from "react-hook-form";
export const PersonScoreForm = () => {
  const { register } = useForm<PersonScore>();  return (
    <form>
      <div className="field">
        ...
        <input
          ...
          ref={register}        />
      </div>
      <div className="field">
        ...
        <input
          ...
          ref={register}        />
      </div>
      <div className="field">
        ...
        <input
          ...
          ref={register}        />
      </div>
      ...
    </form>
  );
};

我们使用了useForm hook的register函数来注册React Hook Form的每个字段的引用。

注意，我们已经把我们的表单数据类型，PersonScore ，在其通用参数中传递给了useForm 。这将确保我们的表单是强类型的。

表单提交

让我们为表单创建一个提交处理程序：

export const PersonScoreForm = () => {
  const { register, handleSubmit } = useForm<PersonScore>();  const onSubmit = (data: PersonScore) => {    console.log("data", data);  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>      ...
    </form>
  );
};

React Hook Form提供了一个提交处理程序。 handleSubmit，我们把它连接到我们的表单。我们将一个回调函数onSubmit 传递给handleSubmit ，在 React Hook Form 验证了所有字段的值之后，该函数被调用。如果验证失败，onSubmit 将不会被调用。

当我们按回车键或点击保存按钮时，我们的onSubmit 函数被调用，字段的值被输出到控制台。

基本验证

让我们把表单中的所有字段变成必填字段：

<form ... >
    <div className="field">
    ...
    <input
        ...
        ref={register({required: true})}    />
    </div>
    <div className="field">
    ...
    <input
        ...
        ref={register({required: true})}    />
    </div>
    <div className="field">
    ...
    <input
        ...
        ref={register({required: true})}    />
    </div>
    ...
</form>

验证是在register 函数参数中指定的。React Hook Form有一些内置的验证规则，其中之一是必填验证，我们通过在参数对象中把required 设置为true 来指定。

如果我们在没有填写表格的情况下点击保存按钮，我们的onSubmit 函数将不再被调用，而焦点将被设置为名称字段。

让我们通过添加一些验证错误信息来改善用户体验：

export const PersonScoreForm = () => {
  const { register, handleSubmit, errors } = useForm<PersonScore>();  ...
  return (
    <form ... >
      <div className="field">
        <label htmlFor="email">Name</label>
        <input ... />
        {errors.name && errors.name.type === "required" && (          <div className="error">You must enter your name.</div>        )}      </div>
      <div className="field">
        <label htmlFor="email">Email</label>
        <input ... />
        {errors.email && errors.email.type === "required" && (          <div className="error">You must enter your email address.</div>        )}      </div>
      <div className="field">
        <label htmlFor="score">Score</label>
        <input ... />
        {errors.score && errors.score.type === "required" && (          <div className="error">You must enter your score.</div>        )}      </div>
      ...
    </form>
  );
};

我们正在使用 errorsuseForm 对象来呈现每个字段的错误（如果存在错误）。

注意我们如何使用errors.fieldName.type 属性来检查错误所属的规则。在我们这个简单的例子中，我们并不需要这样做，因为每个字段只有一条验证规则，但对于更复杂的表单来说，这是一个有用的模式。

请注意我们在浏览errors 属性时如何获得智能提示，因为我们的表单是强类型的。很好!

errors intellisense 如果我们在没有填写表单的情况下点击保存按钮，现在就会显示验证错误。

Validation errors

在CodeSandbox中可以找到这个表单的一个工作例子。

总结

React Hook Form使用起来超级简单，也超级灵活。在这篇文章中，我们只触及到了表面。

在下一篇文章中，我们将深入探讨如何实现更复杂的验证规则。