Formik 处理对象数组的状态

Question

我刚刚在表单中使用 Formik 库，但遇到了问题。我不确定如何处理来自组件内部的对象数组的状态。我知道 setValues 和 setFieldValue 方法......也知道 FieldArray 但我的目标是当我点击添加按钮时将 newZone 添加到 newZones 数组中，我不想渲染它。我想自定义渲染并将其放置在手风琴下。

这里的沙箱：https://codesandbox.io/s/rough-haze-zdlw9?file=/src/App.js

我需要所有自定义处理程序吗？我是否需要在组件内部使用本地状态，然后使用 setFieldValue 来设置状态？或者我可以在不渲染的情况下以某种方式使用 FieldArray 吗？

谢谢

Answer 1

您使用的是 React-Bootstrap 组件而不是 Formik 组件，因此您必须手动为每个输入组件分配 handleChange 和 value 道具。您还必须在用户点击按钮添加时调用 setFieldValue()。

示例：

https://codesandbox.io/s/quirky-leaf-tr3rv