我正在建立一个component in React来创建烹饪食谱。我正在使用react-hook-form来验证表单。我的容器上有两种形式。一种用于通过三个输入字段（名称，数量，单位）添加配料，一种用于步骤-具有一个输入字段。在添加成分或步骤时，我将验证输入数据是否正确，并阻止将项目添加到列表（如果数据不正确，则在此表单下方）。到现在为止还挺好。但是我的问题是，我需要使用页面底部的常规“添加配方”按钮来访问这两种形式的验证过程。例如，如果我将那些必填的输入字段留空，那么我想通过单击“添加配方”按钮来进行检查，而不仅仅是提交这两个“子表单”。 这是要点的链接：Link。 有人可以看看我的代码并给我建议吗。
PS：我创建了FormGroupArray组件，用于动态添加FormGroup元素的数组（我正在使用react-bootstrap）。
答案 0 :(得分：0)
我找到了解决方案。 我的主容器现在是一个表单。我将所有输入更改为不受控制的类型，因为它们应该使用react-hook-form。我正在手动验证应添加到列表中的字段。这是我的解决方案： Gist