Formik 步进器道具+步间挂钩

Question

我正在尝试将一个组件中的数据传递给另一个组件，它们是 another.But 的兄弟组件，它们在 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

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

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

注意我不想将所有 formik initialValues 放在主 formik 步进组件中因为在我的真实项目中，我在第 1 步和第 2 步中有很多值，而且我在步进器中有更多的步骤，具有更多的值，

Answer 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

Formik 步进器道具+步间挂钩

Formik stepper props+hooks between steps

reactjs

stepper

formik