reactjs 在formik表单中useFormik是什么类型?

m1m5dgzv  于 2023-04-29  发布在  React
关注(0)|答案(3)|浏览(136)

我创建了一个由几个组件组成的react formik表单。我需要将useFormik对象传递给表单的组件。什么是适合formik的类型?
父窗体

const formik = useFormik({ ...

子组件

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

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

xt0899hw1#

当你不确定某个类型时,你可以使用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
打字机Playground

plupiseo

plupiseo2#

这可能是旧的,但您的界面可以像这样

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

pu82cl6c3#

你需要设置一些默认属性。

interface OrderStatusFormValues {
  orderNumber: string;
}

const OrderStatusForm = ({ onGetOrderGroups }: OrderStatusFormProps): ReactElement => {
  const { locale, siteId } = useLocale();

  const form: FormikProps<OrderStatusFormValues> = useFormik<OrderStatusFormValues>({
    initialValues: { orderNumber: '' },
    onSubmit: () => {}
  });

相关问题