reactjs - 使用 React Hooks 的多页或多步 formik 表单的类型是什么？

Question

我有一个基本组件<form>

BaseForm.tsx

import React from 'react'
import { useFormik } from 'formik';

export default function BaseForm() {

  const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit: values => console.log(values),
  });


  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <PageOne formik={formik} />
        <PageTwo formik={formik} />
      </form>
    </div>
  )
}

和 PageOne.tsx

import React from 'react'

export default function PageOne({ formik }: any) {
  
  return (
    <div>
      Page One Form Controls...
    </div>
  )
}

同样的 PageTwo.tsx

现在，在 PageOneprops中，我们应该添加什么类型？

我试过PageOne({ formik }: FormikProps<PageOneForm>)但没有工作。

Answer 1

你可以做：

PageOne({ formik }: { formik: FormikConfig<PageOneForm> })

如果 PageOneForm是 的值initialValues。

我总是喜欢将 args 类型提取到接口中。

import React from 'react'
import { FormikConfig } from 'formik'

interface IProps {
  formik: FormikConfig<any>; // expected form values instead of any
}

export default function PageOne(props: IProps) {
  const { formik } = props;
  
  return (
    <div>
      Page One Form Controls...
    </div>
  )
}