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

Question

我正在尝试在Formik帮助下创建可添加的表格，如这张照片：

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

在这种情况下，名称和价格是文本框，但是产品类别与嵌套概念不同！

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

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

用户也可以删除不需要的行...

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

谢谢

Answer 1

您应该使用FieldArray。

  

<FieldArray />是有助于常见数组/列表操作的组件。您向它传递了一个name属性，该属性包含指向相关数组的值内键的路径。然后将使您可以通过渲染道具访问数组帮助器方法。为方便起见，调用这些方法将触发验证并为您管理被触摸的情况。

因此，您将需要一个初始值，该初始值是一个数组，另一个初始值是用来告诉您在添加新字段时将要使用的名称或输入的名称。

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