如何在表单的“外部”反应中验证表单答案

【问题标题】：How to validate forms in react "outside" of a form如何在表单的“外部”反应中验证表单
【发布时间】：2020-07-18 06:03:00
【问题描述】：

我正在构建一个 component in React 来创建烹饪食谱。我正在使用react-hook-form 来验证表单。我的容器上有两个表格。一种用于添加成分，具有三个输入字段（名称、数量、单位），另一种用于步骤 - 具有一个输入字段。当我添加成分或步骤时，我正在验证输入数据是否正确，并阻止将项目添加到列表中，如果数据不正确，列表位于此表单下方。到目前为止，一切都很好。但我的问题是，我需要使用页面底部的通用“添加配方”按钮来访问这两个表单的验证过程。例如，如果我将那些需要的输入字段留空，我也想通过按下“添加配方”按钮来检查，而不仅仅是提交这两个“子表单”。这是要点的链接：Link。有人可以看看我的代码并给我一个建议。

PS.：我创建了 FormGroupArray 组件，用于动态添加 FormGroup 元素数组（我正在使用 react-bootstrap）。

【问题讨论】：

标签： reactjs forms react-hooks react-bootstrap react-hook-form

【解决方案1】：

我找到了解决方案。我的主容器现在是一个表单。我将所有输入更改为不受控制的类型，因为它们应该使用 react-hook-form。我正在手动验证应该添加到列表中的字段。这是我的解决方案： Gist

【讨论】：