Formik stepper props+步骤之间的钩子

Posted 2023-02-23

【中文标题】Formik stepper props+步骤之间的钩子

【英文标题】：Formik stepper props+hooks between steps

【发布时间】：2021-01-03 14:39:29

【问题描述】：

我正在尝试将一个组件中的数据传递给另一个组件，它们是彼此的兄弟。但它们在 Formik Stepper 和 Formik Hook(rff) 中。

index.js -> is entry point, that calls only one component App, as we have no route
App.js -> this the parent component, which has two child, Step1 and Step2
Step1.js -> takes input
Step2.js -> renders data from Step1

我在这里做了一个简单的示例代码链接

https://codesandbox.io/s/keen-germain-formikstepper-xntko?file=/src/

请注意

我不想将所有 formik initialValues 放在主 formik stepper 组件中 因为在我的

实际项目

中，我在第 1 步和第 2 步有很多值，而且我在步进器中还有更多具有更多值的步骤，

【参考方案1】：

这就是答案-

import React from "react";
import  useFormikContext  from "formik";
export default function Step2() 

constvalues =  useFormikContext()
return <p>values.firstName </p>;

完整解决方案 https://codesandbox.io/s/keen-germain-formiksteppersol-xntko?file=/src/App.tsx