如何设置 react-final-form onSubmit 值参数类型 TypeScript答案

【问题标题】：How to set react-final-form onSubmit values param type TypeScript如何设置 react-final-form onSubmit 值参数类型 TypeScript
【发布时间】：2019-06-13 15:22:48
【问题描述】：

如何在 react-final-form 中设置更改 onSubmit 的值类型。

inteface IValues {
    name: string;
}
<Form onSubmit={(values: IValues) => {}}>   // Error happens here
//    Types of parameters 'values' and 'values' are incompatible.
//    Type '{}' is missing the following properties from type 'IFormValues': name

这可行，但我无法获得 value.name

<Form onSubmit={(values: object) => {
    // Property 'name' does not exist on type 'object'
    values.name
}}>

我可以按如下方式转换为 IValues 以提取名称。

<Form onSubmit={(values: object) => {
    const { name } = values as IValues;
}}>

onSubmit 来自 Config，我尝试查找如何设置 FormData 类型但找不到。无论如何我可以在 jsx 中设置 FormData 吗？还有其他我可以做得更好的选择吗？

【问题讨论】：

你好，你解决了吗？
还没有。还是具体的铸造类型
目前这是不可能的，因为 react-final-form 的 TypeScript 定义存在限制。有一个 PR 可以修复它。 github.com/final-form/react-final-form/pull/426

标签： reactjs typescript typescript-typings react-final-form

【解决方案1】：

react-final-form 支持从版本 6.1.0 开始的值类型。

你可以通过简单地为Form组件提供泛型类型来实现它。

import { withTypes } from 'react-final-form'

inteface IValues {
    name: string;
}

const { Form } = withTypes<IValues>()

<Form onSubmit={(values: IValues) => {}}>

【讨论】：