如何设置 react-final-form onSubmit values param type TypeScript

Question

如何设置更改 onSubmit 的值类型以 react-final-form 的形式。

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吗？还有什么其他选择可以做得更好吗？

Answer 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) => {}}>