React Hook 表单错误 - 类型“UseFormRegister<FormData>”不可分配给类型“LegacyRef<HTMLInputElement>”| 不明确的'

Question

我正在阅读一本 React 教程书。有一次，作者向我展示了如何构建一个简单的表单，效果很好。然后，他又将其升级为‘React Hook Form’。

一切都按照说明运行良好，直到最后一行，他说了以下内容。

“将 ref 属性添加到 Header 组件的 JSX 中的输入元素，并将其设置为 React Hook Form 中的注册函数：”

就在此时，我遇到了以下错误。

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。

类型“null”不可分配给类型“HTMLInputElement”ReactJs

'HTMLElement | 类型的参数 null' 不可分配给'Element' 类型的参数。类型“null”不可分配给类型“Element”.ts(2345)

useRef TypeScript - 不可分配给类型 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