reactjs - Tipe apa useFormik dalam formulir formik?


Saya membuat sebuah formulir Formik React yang terdiri dari beberapa komponen. Saya perlu meneruskan objek useFormik ke komponen-komponen dari formulir tersebut. Apa tipe yang tepat untuk Formik?

Bentuk induk

 const formik = useFormik({ ...

Komponen anak

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

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

Jawaban #1

Ketika Anda tidak yakin tentang tipe, Anda dapat menggunakan typeof formik untuk mendapatkan tipe untuk variabel tersebut.

Tanda tangan kait adalah

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

Jadi tipe kembalian adalah FormikProps dengan generic yang bergantung pada nilai-nilai dari form Anda.

import {useFormik, FormikProps} from "formik";

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

Dokumen Hook

Taman Bermain Typescript

Jawaban #2

Ini mungkin sudah lama tetapi antarmukamu bisa seperti ini

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

Artikel terkait