Question

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

缺少什么？还是怎么了？

https://codesandbox.io/s/react-hook-form-typescript-xnb1u

Answer 1

好的，这里有问题：

您需要在输入组件props声明中的props上添加register
您必须使用作为道具传递的register，而不是在Input组件中使用useForm创建的新道具
输入元素缺少名称属性

此处的工作<Input>组件带有注释：

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;

Answer 2

我找到了一篇文章，帮助我找到了解决方法。

对于希望通过React Hook Form使用打字稿组件化的人来说，Codebox是正确的解决方案。

https://codesandbox.io/s/react-hook-form-typescript-xnb1u

如何使用带有Typescript的React Hook表单（输入组件）

2 个答案: