typescript - 在 Formik 中使用 innerRef 访问 formik 状态，如错误

Question

我正在将 NextJS 与 Typescript 一起使用。我在我的子组件中使用 Formik 制作了一个表单。我是innerRef从我的父组件传递过来的。我想在我的父组件中访问 Formik 状态，如errors,touched等。显然，innerRef不允许您访问它。我应该使用什么方法？

子组件：

const ChildComponent: React.VFC<ChildComponentProps> = (props) => {
  const formik = useFormik({
    innerRef: formRef,
    initialValues: formInitialValues,
    validationSchema: createNewStoreFormValidationSchema,
    onSubmit: (values, helpers) => {
      onSubmit && onSubmit(values, helpers);
    },
  });

  React.useImperativeHandle(formRef, () => ({ ...formik }));

  return (
    <Col className={classes.container}>
      <Col
        className={clsx(
          classes.generalInformationContainer,
          containerClassName
        )}
      >
        <Text variant="h3" className={classes.generalInformation}>
          General Information
        </Text>
        <TextField
          id="firstField"
          label="First Field"
          labelInk="neutralPrimary"
          className={classes.field}
          value={formik.values.firstField}
          errorText={showFieldError(
            formik.touched.firstField,
            formik.errors.firstField
          )}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />

        <TextField
          id="secondField"
          label="Second Field"
          labelInk="neutralPrimary"
          value={formik.values.secondField}
          errorText={showFieldError(
            formik.touched.secondField,
            formik.errors.secondField
          )}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </Col>
    </Col>
  );
}

export default ChildComponent

父组件：

const ParentComponent: React.VFC<ParentComponentProps> = (props) => {
  const childFormRef= React.createRef<FormikProps<typeof formInitialValues>>();

  const childFormOnSubmit = React.useCallback(() => {
    childFormRef.current?.handleSubmit();
  }, [childFormRef]);

  return (
    <CreateNewStore
      formRef={childFormRef}
      onSubmit={childFormOnSubmit}
    />
  )
}

标签： typescriptnext.jsformik