如何将两个Formik表格混合在一起，这样提交外部表格将同时提交两个表格

Question

我有一个Formik"形式"；它旨在混合成多种其他甚至更大的Formik形式。它不打算单独提交，但有许多字段用于计算两个感兴趣的值。

摘要：

• FormikA有firstName、lastName字段。

• FormikB具有x、y、z字段，并计算a、b。

• FormikB没有提交按钮。

• FormikA嵌入FormikB。

• FormikA有一个提交按钮。

• 如果单击提交，FormikA必须提交firstName、lastName、a、b。

• FormikB也嵌入在FormikC、FormikE中，因此不应该对FormikA有硬依赖。

这里有一个非常简单的例子，说明我所说的嵌套表单的含义，基于这个游乐场：

import React from "react";
import ReactDOM from "react-dom";
import { Form, Formik, Field } from "formik";
function App() {
return (
<Formik
onSubmit={(values, actions) => console.log(values)}
render={form => (
<Form>
<Field
name="foo"
render={({ field }) => (
<input {...field} placeholder="Some field" />
)}
/>
<Formik
onSubmit={(values, actions) => {
form.setFieldValue(
"address",
`${values.street1}, ${values.street2}`
);
}}
render={form => (
<div style={{ border: "1px solid black"}}>
<strong>Address Subform</strong>
<br />
<Field
name="street1"
render={({ field }) => (
<input {...field} placeholder="Steet 1" />
)}
/>
<Field
name="street2"
render={({ field }) => (
<input {...field} placeholder="Steet 2" />
)}
/>
<button type="submit">Subform Submit</button>
</div>
)}
/>
<button type="submit">Submit</button>
<br />
<br />
<strong>Form Values:</strong>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</Form>
)}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我觉得找不到解决办法。外在的福米克似乎对内在的福米克尔一无所知。

有什么方法可以用Formik实现这种表单子组件的嵌套吗？

Answer 1

有一种方法可以在提交外部表单的同时提交内部表单，但有两个陷阱。

1. 您至少需要React v16.8.0，因为我们将使用useRef()钩子(您提供的沙盒是React v16.4.0(
2. 提交内部表单会传播提交，并且还会自动提交外部表单

我可以提供第一个问题的解决方案，但我不知道第二个问题，因为嵌套形式通常不是传统的。

在组件中创建一个ref：

const submitRef = React.useRef();

将其传递到要单击的内部button：

<button ref={submitRef} type="submit">
Subform Submit
</button>

现在，当提交外部表单时，将添加到您的提交函数中，以触发内部提交函数：

if (submitRef && submitRef.current) {
submitRef.current.click();
}

这将回答提交嵌套表单的特定问题，但在无限循环的意义上打开一个新表单。希望我能帮上我的2美分。