reactjs - React Hook Form 错误 - 类型 'UseFormRegister' 不可分配给类型 'LegacyRef | undefined'

Question

我正在阅读一本 React 教程书。有一次，作者向我展示了如何构建一个简单的表单，效果很好。然后，他继续将其升级为“React Hook Form”。
按照说明一切正常，直到最后一行，他说以下内容。
“在 Header 组件的 JSX 中为 input 元素添加一个 ref 属性，并将其设置为 React Hook Form 中的 register 函数:
就在此时，我遇到了以下错误。

Type 'UseFormRegister<FormData>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'UseFormRegister<FormData>' is not assignable to type '(instance: HTMLInputElement | null) => void'.
    Types of parameters 'name' and 'instance' are incompatible.
      Type 'HTMLInputElement | null' is not assignable to type '"search"'.
        Type 'null' is not assignable to type '"search"'.  TS2322

    103 |       <form onSubmit={handleSubmit}>
    104 |         <input
  > 105 |         ref={register}
        |         ^
    106 |           name="search"
    107 |           type="text"
    108 |           placeholder="Search..."

最终代码可在此位置获得 - https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition/blob/master/chapter-06/finish/frontend/src/Header.tsx
我将我的代码比较为相同，我把它放在下面。

import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';

type FormData = {
  search: string;
};

export const Header = () => {
  const { register } = useForm<FormData>();
  const [searchParams] = useSearchParams();
  const criteria = searchParams.get('criteria') || '';
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
        ref={register}
          name="search"
          type="text"
          placeholder="Search..."
          defaultValue={criteria}
        />
      </form>
    </div>
  );
};

我仍在学习 React 和 TypeScript。我了解错误与类型不匹配有关。具体来说，“搜索”不能为空。但除此之外，我不知道如何解决这个问题。
我查看了以下现有问题。他们似乎都在讨论这个，但不是用 React Hook Form。
Type 'null' is not assignable to type 'HTMLInputElement' ReactJs
Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345)
useRef TypeScript - not assignable to type LegacyRef<HTMLDivElement>

Answer 1

这似乎是一个常见问题，并且已在链接的 github 问题部分中多次提出。没有提供完整的代码示例，所以在这里发布我自己的解决方案，以防万一，另一位读者像我一样被难住了。

  <form onSubmit={handleSubmit}>
    <input
      {...register("search")} defaultValue={criteria}
      placeholder="type here"
      type="text"
    />
  </form>

更多细节在这里 - https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition/issues/11