我在我的 React 应用程序 Form.Provider 中使用 Ant Design 库。我使用它，因为我在主表单中生成内部表单。我的目标是，当我单击SUBMIT按钮时，同时从外部表单和内部表单输出数据。内部形式的数量取决于用户，因此他可以生成他想要的数量。我的外形：
<Form.Provider
onFormFinish={(name, { values, forms }) => {
console.log(forms);
if (name === "inner") {
const { inner } = forms;
const innerF = inner.getFieldValue("first") || [];
console.log(innerF);
}
}}
>
<Form name="outter" onFinish={onFinish}>
{nr.map(i => (
<div>
<p key={i}>{i}</p>
<Inner nr={i} />
</div>
))}
<Form.Item name="nr" label="Nr">
<InputNumber min={1} max={5} onChange={handleInputChange} />;
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
</Form.Provider> <Form name="inner" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map(field => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, "last"]}
fieldKey={[field.fieldKey, "last"]}
rules={[{ required: true, message: "Missing last name" }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.Item>
<Button ref={myRef} type="primary" htmlType="submit">
-
</Button>
</Form.Item>
</Form>我在外部表单中添加了 Form.Provider 但我无法弄清楚如何在同一时间从内部表单和外部表单获取所有值，单击SUBMIT按钮。
演示：https
://codesandbox.io/s/mutable-tree-5c1y1?file = /Outer.js:485-1291 问题：为什么 Form.Provider 不起作用以及如何从内部和外部输出所有数据表格，点击SUBMIT按钮？