reactjs react-hook-form中handleSubmit参数的类型

06odsfpq 于 2023-05-17 发布在 React

关注(0)|答案(2)|浏览(207)

我在handleSubmit函数中遇到TypeScript错误。
1.我正在通过useForm检索handleSubmit函数：

const {handleSubmit, control, watch, reset} = useForm()

1.我在定义提交函数：

const submit = (data: { file: File, crop: Area }) => {
    onSubmit(data.file, data.crop)  // onSubmit is passed from parent component
}

1.我在Form组件的onSubmit属性中传递handleSubmit

<Form onSubmit={handleSubmit(submit)}>
    // registering form fields here
</Form>

1.出现以下TypeScript错误：

Argument of type '(data: {    file: File;    crop: Area;}) => void' is not assignable to parameter of type 'SubmitHandler<FieldValues>'.
[1]   Types of parameters 'data' and 'data' are incompatible.
[1]     Type '{ [x: string]: any; }' is missing the following properties from type '{ file: File; crop: Area; }': file, crop  TS2345

如果我像这样传递handleSubmit，一切都正常。

<Form onSubmit={handleSubmit(submit as any)}></Form>

但是我尽量不在我的项目中使用any。因此，如果有人能解释我应该如何为handleSubmit函数类型参数，我将aprecciate它。;）

reactjs

来源：https://stackoverflow.com/questions/71275687/type-of-handlesubmit-parameter-in-react-hook-form

2条答案

按热度按时间

flvtvl501#

您可以将与添加到submit()函数的data相同的类型添加到useForm钩子。
所以在你的例子中，你可以创建一个新的类型：

type Data = { 
  file: File; 
  crop: Area;
}

并将其传递给submit()函数：

const submit = (data: Data) => {
// ...

useForm()钩子：

const {handleSubmit, control, watch, reset} = useForm<Data>()

那么它应该起作用了：）
据我所知，提供给submit()的数据的类型只向submit()函数提供了有关键入的信息。
但是因为这个函数也是作为参数传递给handleSubmit()的，所以handleSubmit()需要知道传递给submit()的数据类型。我们可以让它知道这个类型，只需将它提供给useForm钩子。

赞(0）回复(0）举报 2023-05-17

yeotifhr2#

一个更完整的例子可能看起来像这样：

const formSchema = z.object({
  title: z.string(),
})

type FormData = z.infer<typeof formSchema>

const formOptions: UseFormProps<FormData> = {
  resolver: ...,
  defaultValues: ...,
}

const { handleSubmit } = useForm<FormData>(formOptions)

虽然有点冗长，但这样做的好处是，您可以在defaultValues上输入数据值，也可以在表单提交处理程序中输入数据值。我希望这有帮助！

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs react-hook-form中handleSubmit参数的类型

2条答案

相关问题

热门标签

最新问答