Formik步进器道具+步骤之间的钩接

问题描述

我正在尝试将一个组件中的数据传递给另一个彼此兄弟的组件。但是它们与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步进器组件中 因为在我的真实项目中，我在第1步和第2步中有很多值，并且在步进器中还有更多的步骤，并且有更多的值，

解决方法

这就是答案-

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