Какой тип useFormik в формах formik?

#reactjs #typescript #formik

#reactjs #typescript #formik

Вопрос:

Я создал форму react formik, которая состоит из нескольких компонентов. Мне нужно передать объект useFormik компонентам формы. Какой правильный тип для formik?

Родительская форма

  const formik = useFormik({ ...
  

Дочерний компонент

 interface IAddressBoxProps {
  skip: () => void
  formik: any
}

const AddressBox: React.FC<IAddressBoxProps> = (props: IAddressBoxProps) => {
  const { skip, formik } = props
 ...
  

Ответ №1:

Если вы не уверены в типе, вы можете использовать typeof formik , чтобы получить тип для этой переменной.

Сигнатура перехвата

 useFormik<Values>(config: FormikConfig<Values>): FormikProps<Values>
  

Таким образом, возвращаемый тип FormikProps имеет общий, который зависит от значений вашей формы.

 import {useFormik, FormikProps} from "formik";

interface MyValues {
    id: number;
}
export const MyComponent = () => {
    const formik: FormikProps<MyValues> = useFormik<MyValues>({});
}
  

Hook Docs

Игровая площадка Typescript

Ответ №2:

Это может быть старым, но ваш интерфейс может быть таким

 interface IAddressBoxProps {
  skip: () => void
  formik: FormikProps<InitialValuesInterface>
}