Reactjs 如何将React钩子窗体与Typescript（输入组件）一起使用

该组件没有错误，但在我实际调用输入组件的索引文件中，它有一个错误，因为它不能使用register={register}

少了什么？还是怎么了

好，这里是问题：

您需要在输入组件props声明中将

注册
添加到props

您必须使用作为道具传递的

寄存器，而不是在输入组件中使用
useForm
创建的新寄存器

输入元素缺少name属性

下面是带注释的工作

组件：

import React, { InputHTMLAttributes } from "react";
//import { useForm } from "react-hook-form"; // don't need the import

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  id: string;
  label: string;
  register: any; // declare register props
}

const Input: React.FC<InputProps> = ({ id, label, register, ...rest }) => {
  //const { register } = useForm(); // don't use a new `register`, use the one from props

  return (
    <div className="input-block">
      <label htmlFor={id}>{label}</label>
      <br />
      <br />
      {/* you must declare the `name` attribute on the input element */}
      <input name={id} type="text" id={id} ref={register} {...rest} />
    </div>
  );
};

export default Input;

import React，{inputtmlattributes}来自“React”；
//从“react hook form”导入{useForm}；//不需要导入
接口InputProps扩展了InputTmPlattributes{
id：字符串；
标签：字符串；
register:any；//声明注册道具
}
常量输入：React.FC=（{id，label，register，…rest}）=>{
//const{register}=useForm（）；//不要使用新的“register”，使用props中的一个
返回(
{label}




{/*必须在输入元素上声明`name`属性*/}
);
};
导出默认输入；

我找到了一篇帮助我找到解决方案的文章

Codebox为那些希望使用React钩子形式使用typescript组件化的人提供了正确的解决方案

---

我找到了一篇帮助我找到解决方案的文章。Codebox为那些希望使用React-Hook表单使用typescript组件化的人提供了正确的解决方案。感谢您的帮助，Luca。