Formik自定义组件handleChange/handleBlur的TypeScript类型兼容问题求解

这个问题的核心是Formik的内置处理函数类型和你的自定义FieldInput组件的props类型不匹配，但我们完全不需要用any或者强行修改参数类型，只需要调整两个地方就能完美解决：

1. 修正FieldInput的Props类型定义 #

首先，在FieldInput.tsx里，我们应该让handleChange和handleBlur的类型兼容Formik的处理函数，而不是自定义成(e: string) => undefined。Formik已经提供了现成的类型可以直接导入使用：

import React from 'react';
import { TextInput, View } from 'react-native';
import { FieldChangeHandler, FieldBlurHandler } from 'formik';

// 重新定义FieldInput的props类型
interface FieldInputProps {
  handleChange: FieldChangeHandler<string>;
  handleBlur: FieldBlurHandler<string>;
  value: string;
  fieldType: string;
  icon: string;
  placeholderText: string;
}

export const FieldInput = ({ 
  handleChange, 
  handleBlur, 
  value, 
  placeholderText 
}: FieldInputProps) => {
  return (
    <View>
      {/* React Native的TextInput用onChangeText传递字符串，正好匹配FieldChangeHandler */}
      <TextInput
        value={value}
        onChangeText={handleChange}
        onBlur={handleBlur}
        placeholder={placeholderText}
        keyboardType="phone-pad"
      />
      {/* 你的icon组件... */}
    </View>
  );
};

FieldChangeHandler<string>和FieldBlurHandler<string>是Formik专门为字段处理定义的类型，它们既支持接收ChangeEvent对象，也支持直接接收字符串值，完美适配React Native的TextInput.onChangeText场景。

2. 在父组件中传递字段绑定后的处理函数 #

Formik的handleChange是一个重载函数：

• 直接调用handleChange(e)会处理整个表单的变更事件
• 调用handleChange('phoneNumber')会返回一个专门绑定到phoneNumber字段的处理函数，这个函数的类型正好和我们上面定义的FieldChangeHandler<string>匹配。

所以父组件里的用法要改成这样：

<Formik 
  initialValues={initialValues} 
  onSubmit={handleSubmitForm} 
  validationSchema={validationSchema}
>
  {({ handleChange, handleBlur, handleSubmit, values }) => (
    <View style={styles.searchFieldContainer}>
      <View style={styles.form}>
        <FieldInput 
          // 这里要传入绑定了字段名的处理函数
          handleChange={handleChange('phoneNumber')} 
          handleBlur={handleBlur('phoneNumber')} 
          value={values.phoneNumber} 
          fieldType="phoneNumber" 
          icon='phone' 
          placeholderText='49152901820' 
        />
        <ErrorMessage name="phoneNumber" render={(msg) => (
          <Text style={styles.errorText}>{msg}</Text>
        )} />
      </View>
      <View style={styles.buttonContainer}>
        <Button onPress={handleSubmit}> Search </Button>
      </View>
    </View>
  )}
</Formik>

为什么这样能解决问题？ #

之前的错误是因为你直接传递了handleChange本身，它的类型是接收ChangeEvent<any>的，而你的FieldInput期望的是接收字符串的函数。当你用handleChange('phoneNumber')时，返回的函数已经和指定字段绑定，并且支持接收字符串作为参数（这正是React Native TextInput传递的内容），TypeScript就能正确识别类型，不会再报错了。

内容的提问来源于stack exchange，提问作者user12541823