Javascript 如何使用Formik和React实现可添加字段？

我正试图在Formik的帮助下创建一个类似于此照片的可添加表单：

但实现此功能的最佳实践是什么

在本例中，名称和价格是文本框，但产品类别与嵌套概念不同

使用此表单，用户可以将产品添加到多个类别中，用户可以添加更多字段并设置新类别

由于有箭头，用户必须按照步骤在最后一步中设置类别项目

用户还可以删除不需要的行

我搜索了StackOverflow和Google，但没有找到任何合适的解决方案

谢谢

您应该使用

是一个帮助进行常见数组/列表操作的组件。您可以向它传递一个name属性，该属性包含保存相关数组的值中的键的路径。然后，将允许您通过渲染道具访问数组帮助器方法。为了方便起见，调用这些方法将触发验证，并为您管理这些方法

因此，在添加新字段时，您需要一个初始值（即数组）和另一个初始值来告诉您所需的名称或输入

---

如果您查看文档中的示例，它正是您所需要的。

如何查找和填写下拉列表？我必须使用

document.getElementById

选择下拉列表，然后附加childs？好的，我已经阅读了该链接，但是如何管理更改前一步下拉列表后的下拉列表填充？我应该按ID和

文档访问下一个下拉列表。getElementByID

或者您有不同的方法？例如，如果用户更改了类别，我应该填充子类别，因为多个下拉列表中不可能使用单个状态或数组索引FieldArrays@Alex首先，在react中，99%的情况下您不需要也不应该使用

document.getElementByID

。第二，你需要展示你的代码，这样我才能更好地理解你在做什么，我有点困惑。。。我需要一个技巧来填充下一个下拉列表，例如在更改类别后填充子类别或在第10行更改我找到的子类别并填充类别项。。。因为它是无限的rows@Alex请显示你如何做下拉列表的代码，有一百万种方法可以做到这一点。请说明您到目前为止做了什么一般来说，我认为孤独不是一个合适的解决方案，因为对于编辑，我将有很多问题需要重新渲染下拉列表，填充这些下拉列表，并处理onChange以填充下一步下拉列表。。。真的，这是一个痛苦的挑战！我已经编写了大约600行代码来实现这个组件，但我认为您不理解；-）