T扩展ChangeEvent ? void:(e:字符串| ChangeEvent )

问题描述 投票:0回答:1

我有一个用于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的类型更改为字符串。 “任何”也不是一个好选择。我该如何解决?

javascript reactjs typescript react-native formik
1个回答
1
投票

我相信此行引起的错误

© www.soinside.com 2019 - 2024. All rights reserved.