在组件之外访问Formik的值|反应 [英] Access Formik's values outside of component | React

问题描述

我正在为项目使用Formik，并且设置如下:

I am using Formik for my project and I have my setup looking like this:

|-MenuModal
|--MenuEdit
|---MenuEditForm

MenuModal是MenuEdit和MenuEditForm的父级.组件MenuEditForm负责返回Formik表单，但是我在其父级MenuModal中调用了提交，后者随后通过React的refs在MenuEdit中运行了commit函数.杂乱?是的！

Where MenuModal is the parent to MenuEdit and MenuEditForm. The component MenuEditForm is responsible for returning the Formik form, but I am calling the submit in it's parent MenuModal, which laters runs the submit function in MenuEdit via React's refs. Messy? Yup!

现在，我正在尝试使用状态和回调函数将Formiks values从MenuEditForm转换为MenuEdit.但是由于我没有使用Formiks自己的onSubmit:

Right now I am trying to use state and callback functions to get the Formiks values from MenuEditForm to MenuEdit. But since I am not using Formiks own onSubmit:

    <Formik
        initialValues={menu}
        validationSchema={validationSchema}
        onSubmit={values => console.log('values', values)} // 'values' is undefined
        ...

我的values将是未定义的，并且我无法使我的Submit函数通过.

My values will be undefined and I can't make my submit function go through.

所以我想知道如何在MenuEditForm中访问我的values，以便以后将其传递给MenuEdit并完成我的提交功能.

So I wonder how I can access my values in MenuEditForm so I later can pass it up to MenuEdit and complete my submit function.

感谢阅读.

推荐答案

要访问formik组件之外的值，可以使用钩子执行此操作:

To access values outside of the formik component, you can do this with hooks:

      const formRef = useRef();

      return (
        <Formik
          ...
          innerRef={formRef}
        >
        ...
      </Formik>

然后，可以在组件外部的任何位置使用formRef.current.values访问值.

Then, can access values using formRef.current.values anywhere outside of the component.

这篇关于在组件之外访问Formik的值|反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！