我想在 Material UI Stepper 组件中使用嵌套的 Step 组件

这是我正在寻求的行为。我在 NextJS 上下文中使用 Material UI 和 Formik。我使用教程作为参考。

线框

下面是一些线框图，可帮助说明三个顶级父步骤中的每一个，第三个屏幕截图说明最后一个父步骤（步骤 3）具有三个嵌套的子步骤。

家长第一步 -告诉我们您的财产没有孩子的步骤

这是表单的第一步。客户将提供有关将生产媒体的土地或站立结构的信息（取决于那里的选择，某些产品将不是他们可以选择的选项）。

屏幕截图 1：这是表单中的第一步

第一步截图

家长第二步 -选择您的服务包含多种产品和套餐的门户

这一步实际上是查看分类产品的非线性门户。有四个服务类别，包括产品和子包。目标是能够挑选和选择产品并将它们添加到购物车。

截图 2：这是主页/门户

第二步截图

家长步骤三 -提供一些信息3 子步骤

这一步实际上是查看分类产品的非线性门户。有四个服务类别，包括产品和子包。目标是能够挑选和选择产品并将它们添加到购物车。

截图 3：这是我们在 3 个子“步骤”内收集信息的地方

第三步截图

这是 Material Ui Stepper 组件的概要。 https://material-ui.com/components/steppers/

依赖项/环境

1. 我将此回购作为起点：https ://github.com/CharlestonREM/youtube-2020-june-multi-step-form-formik
2. 我正在使用 Formik-Material UI：https ://github.com/stackworx/formik-material-ui
3. 我想使用带有嵌套步骤的 Material UI Stepper 组件：https ://material-ui.com/components/steppers/

Material-ui用+制作表格react。有没有办法将标签布局到输入字段的一侧？它更具可读性。

像这样：

而不是

我只能找到标签和输入区域混合在一起的字段。我可以构建自己的组件或网格，但似乎这是一个应该存在的明显布局。

文档页面 https://material-ui.com/components/text-fields/

我在 React Typescript 上使用 Formik 来处理我的学生资料表格。此表单应处理简历和成绩单文件上传。我注意到一切正常，直到我在 Chrome 中测试我的表单并在控制台日志中看到简历和脚本文件的输入节点的值被设置为 C:\fakepath{Original File Name}。

在我的反应组件中，我有这两个初始值

我有一个文本字段来更改名称字段的值。我有一个按钮来更改年龄字段。

如果我输入名称为“杰瑞”并按下该按钮更新年龄它将更新年龄为 75 岁并将名称“杰瑞”再次重置为“汤姆”。

这是我的代码

在文本框中输入 Jerry 并点击按钮，看到它变为“Tom”

我该如何解决？

任何帮助！提前致谢！=)

警告： isInitialValid 已被弃用，并将在 Formik 的未来版本中删除。请改用 initialErrors 或 validateOnMount。

我没有在 formik 中找到 validateOnMount ？

我尝试使用validateOnMount而不是 isInitialValid:false 但它有错误。

我使用 Formik 在功能组件 ReactJS 上创建简单的表单。当组件挂载时，我的表单应该从 API 获取数据的输入字段。为此，我使用了 fetch 和 useEffect。获取后，从 API 中检索数据，但在触发 formik.handleChange 之前不会填充。

如果尝试在任何输入字段中指定某些内容，则会触发 formik.handleChange，并且所有字段都会立即填充来自 API 的数据（在我的情况下，只填充电子邮件）

当组件挂载时，我如何触发 formik.handleChange ？

沙盒链接

此外，我还有第二种使用 ReactState 的方法，但我认为这种方法不太受欢迎，但它还有另一个错误：获取后，状态填充了我的输入字段，但验证失败。当我尝试提交数据时，验证发送反应状态的默认值（那些在获取之前）

使用 useState 方式链接到 SandBox

我正在使用 Formik 和 Material-UI 中的步进器在 React 中创建一个多步骤表单。那部分正在工作（终于！），我主要了解如何。第 1 步是账单地址，第 2 步是选择订阅计划，第 3 步是使用 Stripe 及其 CardElements 付款。这就是我偏离轨道的地方。

我在应用程序中将 Stripe 加载到较高的位置，因此它已被包装并可用于我的表单。都好。单独测试时，我可以成功调用 Stripe 方法。

我的 Formik 外层在这里：

在 formStepper 创建时，我调用useStripe()并useElements()创建一个CardElement传递到第 3 步的函数：

在第 3 步中，我可以按预期渲染和使用 CardElement：

我的困惑是如何访问这个元素以便将数据提交给 Stripe？如何访问我传递到第 3 步的道具并使用它来处理付款？
我尝试将 Stripe 函数放在步骤 3 的函数中，但它们从未被调用，因为 onSubmit 函数位于步骤的父级上。在不破坏使用 Stripe Elements 的安全性的情况下，我无法将卡号放入 Formik 的 initialValues 中。我能得到的最接近的是这个错误：

针对评论的更新： stripeProps 是一次失败的尝试将信息打包到FormikStepper中，它将道具传递给孩子，FormikStep. onSubmit来电，createPaymentMethod如下：

我不断获取数据：在我的 axios 调用中通过 nodemon 快速调用我的路由时未定义。

这是我的路线 oracle2：

邮递员长这样：

标题：

身体看起来像这样：

任何帮助，将不胜感激。使用 Formik 值作为输入响应前端

我有一个表格。单击“评估”按钮后，我发送了一个帖子请求。此请求的响应是 JSON，我需要将其显示在名为 Output 的 textField 中。如何在“输出”文本字段中显示数据？我只需要将数据（在本例中为 json）显示到文本字段。

我的文本字段如下所示：

形式看起来像这样

我使用 formik 和 yup 在我的应用程序中处理表单验证。

我有 2 个相互关联的字段，比如说字段“日期”和字段“时间”。

我想在字段“时间”中进行自定义验证，以根据字段“日期”中的值检查一天中的时间是否已经过去

例如，今天是 2021 年 2 月 26 日上午 8 点，因此用户无法选择 8 点以下的时间。