Formik stepper props+步骤之间的钩子答案

【问题标题】：Formik stepper props+hooks between stepsFormik stepper props+步骤之间的钩子
【发布时间】：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 步有很多值，而且我在步进器中还有更多具有更多值的步骤，

【问题讨论】：

标签： reactjs formik stepper

【解决方案1】：

这就是答案-

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

const{values} =  useFormikContext()
return <p>{values.firstName} </p>;
}

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

【讨论】：