ReactJS、Formik、Bootstrap 模态 - 从模态按钮提交

Question

我的 ReactJS 应用程序中有以下结构 - CodeSandBox link。我试图通过使用 Bootstrap 模态 window 的按钮以某种方式提交 Formik 表单，但是我无法理解如何从树下的 2 个组件调用表单提交并将函数组合在一起.

哪位好心人能告诉我是不是可以实现的？

谢谢！

Answer 1

在 FormFields 组件中，您需要在表单中添加一个 id

<Form id="fooId">

并为模态按钮添加 form 和 type 属性，例如：

<Button
 ...
 type="submit"
 form="fooId"
 ...
/>

表格将被提交。您可以跳过将 onClick 事件传递给该按钮，并将 doSubmit 方法传递给 FormFields 组件中的 Formik 组件。

ReactJS, Formik, Bootstrap Modal - Submit from modal button