我正在阅读一本 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 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 https://stackoverflow.com/questions/48488701/type-null-is-not-assignable-to-type-htmlinputelement-reactjs
'HTMLElement | 类型的参数null' 不可分配给“Element”类型的参数。类型“null”不可分配给类型“Element”.ts(2345) https://stackoverflow.com/questions/63520680/argument-of-type-htmlelement-null-is-not-assignable-to-parameter-of-type-el
useRef TypeScript - 不可分配给类型 LegacyRef https://stackoverflow.com/questions/66963289/useref-typescript-not-assignable-to-type-legacyrefhtmldivelement