Formik + Yup + Typescript，绑定元素 \'field\' 隐式具有 \'any\' type.ts

Question

下面是我的代码和错误的屏幕截图。屏幕截图仅用于视觉辅助。产生错误的代码 sn-p 就在它的正下方。

错误是 TypeScript 表示绑定元素隐式具有任何类型。我不确定它应该有什么类型。我是 TypeScript 的新手，如果能对错误进行任何澄清并提供修复方法的指示，我将不胜感激。

我将不胜感激任何帮助。我做了一些研究，但我发现与此问题相关的那些都在不久前标记为已修复，但我现在在这里。那可能是我:)

我正在使用脉轮用户界面

代码inspired by the Formik example以及example on Chakra UI docs

interface Values {
  password: string;
  email: string;
}

let formSchema = object().shape({
  email: string().email().required("Email is required"),
  password: string().required("Password is required"),
});

const Login: React.FC = () => {
  return (
    <Container
      maxW="lg"
      py={{ base: "12", md: "24" }}
      px={{ base: "0", sm: "8" }}
    >
      <Stack spacing="8">
        <Stack spacing="6">
          <Stack spacing={{ base: "2", md: "3" }} textAlign="center">
            <Heading size={useBreakpointValue({ base: "xs", md: "sm" })}>
              Log in to your account
            </Heading>
          </Stack>
        </Stack>
        <Box
          py={{ base: "0", sm: "8" }}
          px={{ base: "4", sm: "10" }}
          bg={useBreakpointValue({ base: "transparent", sm: "bg-surface" })}
          boxShadow={{ base: "none", sm: useColorModeValue("md", "md-dark") }}
          borderRadius={{ base: "none", sm: "xl" }}
        >
          <Formik
            initialValues={{
              password: "",
              email: "",
            }}
            validationSchema={formSchema}
            onSubmit={(values: Values) => {
              console.log("submiting");
              console.log(values);
            }}
          >
            <Form>
              <Stack spacing="6">
                <Stack spacing="5">
                  <Field name="email" id="email" type="email">
                    {({ field, form }) => (
                      <FormControl
                        isInvalid={form.errors.email && form.touched.email}
                      >
                        <FormLabel htmlFor="email">Email</FormLabel>
                        <Input {...field} />
                        <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                      </FormControl>
                    )}
                  </Field>
                  <Field name="password" id="password" type="password">
                    {({ field, form }) => (
                      <FormControl
                        isInvalid={
                          form.errors.password && form.touched.password
                        }
                      >
                        <FormLabel htmlFor="password">Password</FormLabel>
                        <PasswordField {...field} />
                        <FormErrorMessage>
                          {form.errors.password}
                        </FormErrorMessage>
                      </FormControl>
                    )}
                  </Field>
                </Stack>
                <HStack justify="space-between">
                  <Checkbox defaultChecked>Remember me</Checkbox>
                  <Button variant="link" colorScheme="blue" size="sm">
                    Forgot password?
                  </Button>
                </HStack>
                <Stack spacing="6">
                  <Button variant="primary">Sign in</Button>
                </Stack>
              </Stack>
            </Form>
          </Formik>
        </Box>
      </Stack>
    </Container>
  );
};

export default Login;

Answer 1

你只需要像这样定义你的 fieldProp

 interface FieldProps {
    field: {
      name: string;
      value: any;
      onChange: (event: React.ChangeEvent<any>) => void;
      onBlur: (event: React.FocusEvent<any>) => void;
    };
    form: {
      touched: { [field: string]: boolean };
      errors: { [field: string]: string };
    };
    meta: {
      error?: string;
      touched?: boolean;
    };
  } 

那么你就可以开始了，像这样将这些字段和表单作为道具传递

({field, form, meta}: FieldProps)=>()