如何在打字稿中应用带有 Chakra 的 Formik？

Question

我正在尝试在 Chakra 上使用以下示例，但使用的是 Typescript

<Formik
  initialValues={{ name: "Sasuke" }}
  onSubmit={(values, actions) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
    }, 1000);
  }}
>
  {(props) => (
    <Form>
      <Field name="name" validate={validateName}>
        {/* Trouble in this line below*/}
        {({ field, form }) => ( 
          <FormControl
            isInvalid={form.errors.name && form.touched.name}
          >
            <FormLabel htmlFor="name">First name</FormLabel>
            <Input {...field} id="name" placeholder="name" />
            <FormErrorMessage>
              {form.errors.name}
            </FormErrorMessage>
          </FormControl>
        )}
      </Field>
      <Button
        mt={4}
        colorScheme="teal"
        isLoading={props.isSubmitting}
        type="submit"
      >
        Submit
      </Button>
    </Form>
  )}
</Formik>

如何在 Typescript 中定义“字段”和“表单”？有道具吗？还是我应该只在界面中定义这些东西？

Answer 1

我也遇到了同样的问题，看了下源码。您应该能够使用 FieldInputProps，其中 T 是您期望的值类型和 FormikProps，其中 T 是您期望的值的类型定义。

例如

{({ field, form }: { field: FieldInputProps<string>, form: FormikProps<{ name: string, surname: string }> }) => {
  ...
}}

如何在打字稿中应用带有 Chakra 的 Formik？

How to apply Formik with Chakra in typescript?

typescript

reactjs

formik

chakra-ui