我有一个用于Formik输入验证的自定义输入组件。看起来像这样:
export const FieldInput: React.FunctionComponent<FieldInputProps> = ({
handleChange,
handleBlur,
fieldType,
placeholderText,
value,
hidePassword,
hidePasswordIcon,
togglePassword,
icon,
}) => {
return (
<Item rounded style={styles.personalListItem}>
<Icon name={icon} />
<Input
autoFocus={true}
placeholder={placeholderText}
keyboardType="default"
onChangeText={handleChange(fieldType)}
onBlur={handleBlur(fieldType)}
value={value}
secureTextEntry={hidePassword}
/>
{togglePassword ? (
<Icon
name={hidePasswordIcon}
onPress={togglePassword}
/>
) : null}
</Item>
);
};
我正在屏幕上这样使用它:
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={validationSchema}>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View style={styles.searchFieldContainer}>
<View style={styles.form}>
<FieldInput
handleChange={handleChange}
handleBlur={handleBlur}
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和handleBlur上仍然出现TypeScript错误:
Type '{ (e: ChangeEvent<any>): void; <T = string | ChangeEvent<any>>(field: T): T extends ChangeEvent<any> ? void : (e: string | ChangeEvent<any>) => void; }' is not assignable to type '(e: string) => undefined'.
Types of parameters 'e' and 'e' are incompatible.
Type 'string' is not assignable to type 'ChangeEvent<any>'
FieldInput.tsx(9, 3): The expected type comes from property 'handleChange' which is declared here on type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'
我不明白这个错误。字段输入应该是字符串,我不认为我应该将ChangeEvent的类型更改为字符串。 “任何”也不是一个好选择。我该如何解决?
我相信此行引起的错误