React Native Typescript Formik转换事件类型

Question

在React Native的Formik文档中，有一个示例表单：

<Formik initialValues={{ email: '' }} onSubmit={(values) => console.log(values)}>
  {({ handleChange, handleBlur, handleSubmit, values }) => (
    <View>
      <TextInput onChangeText={handleChange('email')} onBlur={handleBlur('email')} value={values.email} />
      <Button onPress={handleSubmit} title="Submit" />
    </View>
  )}
</Formik>

然而，这会给我带来一个 TypeScript 错误：

No overload matches this call.
Overload 1 of 2, '(props: Readonly<ButtonProps>): Button', gave the following error.
  Type '(e?: FormEvent<HTMLFormElement> | undefined) => void' is not assignable to type '(ev: NativeSyntheticEvent<NativeTouchEvent>) => void'.
    Types of parameters 'e' and 'ev' are incompatible.
      Type 'NativeSyntheticEvent<NativeTouchEvent>' is not assignable to type 'FormEvent<HTMLFormElement>'.

鉴于我正在通过解构获取handleSubmit函数，如何正确地转换事件类型？

注意：我知道我可以这样做，但我已经读到这会导致React中的额外渲染：

<Button onPress={(e) => handleSubmit(e as any)} title="Submit" />

- mahi-man

---

“但是我读到过这会导致在 React 中额外的渲染，你能解释一下吗？” - Vencovsky

按钮来自React Native：import { Button, TextInput } from 'react-native'; - mahi-man

关于重新渲染，请参见此处的解释：https://dev59.com/MFoV5IYBdhLWcg3wIbtT#36677798 - mahi-man

在进一步阅读后，我认为在这种情况下使用内联箭头函数是可以的。也就是说，我会坚持这样写：<Button onPress={(e) => handleSubmit(e as any)} title="提交" /> - mahi-man

似乎这个错误已经存在了一段时间。 为了避免重新渲染并且不出现错误，您可以尝试： onPress={handleSubmit as any} 这并不是理想的解决方案，但它将防止不必要的重新渲染。 - Jan Jaworski

Answer 1

也许不是最好的方法，但你可以像这样做。

  <Button
     onPress={handleSubmit as (values: any) => void} // <= add this
     title="Submit" />

- Mina Makar

Answer 2

根据Mina Makar的回答，我以以下方式解决了类型错误：

<Button
  onPress={
    handleSubmit as (values:
      GestureResponderEvent |
      React.FormEvent<HTMLFormElement> |
      undefined) => void
  }
/>

- ivts