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

问题描述

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

I am trying to pass data in a component to another component, which are siblings to one another.But they are in a Formik Stepper with 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

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

I made a simple example code here the link

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

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

• Note thatI don't want to put all formik initialValues in the main formik stepper componentbecause In my real project I have a lot of values at step 1 and step 2 and I have there more steps in the stepper with more values,

推荐答案

这就是答案-

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步进器道具+步骤之间的钩接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！