如何在react-hook-form fieldArray中保留隐藏字段？

Question

我正在尝试基于对象数组构建表单列表，这些对象具有应该能够编辑并呈现为输入的字段，以及不需要呈现的只读字段，例如 id。

我通过使用useFieldArray钩子来做到这一点。然而，react hook 似乎只保存那些注册为输入的字段，这导致我的 id 字段在提交处理程序中丢失。

如何保留我的只读字段？

这是沙箱示例，这样您就可以明白我在说什么。我将 id 添加到默认值和附加值。当您单击提交时，ID 不再存在。

Answer 1

用于<input type='hidden' />您不想向用户显示的字段（例如用户 ID）并正常注册。因此，在您的代码中，您应该为 id 添加另一个输入，如下所示：

<input type="hidden" {...register(`test[${index}].useId`)} />

这就像你设置时一样display: none，但字段值仍然被提交。

现场演示