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

【问题标题】：ReactJS, Formik, Bootstrap Modal - Submit from modal buttonReactJS、Formik、Bootstrap 模态 - 从模态按钮提交
【发布时间】：2020-11-02 09:24:18
【问题描述】：

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

有人可以建议它是否可以实现吗？

谢谢！

【问题讨论】：

你从来没有在模态中使用你的FormFields，所以我不清楚这个问题
Modal 内部使用了 Formik 表单域“Title”。
这能回答你的问题吗？ React Formik use submitForm outside <Formik />

标签： reactjs bootstrap-modal formik

【解决方案1】：

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

<Form id="fooId">

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

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

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

Codesandbox

【讨论】：