javascript - 使用 getFieldValue() 保存多种形式的数据

Question

我尝试使用 Main 保存来自 2 个表单( SubForm 和 getFieldValue() )的数据.这里应该出现两个表单数据:

const save = () => {
    console.log(myRef.current.getFieldValue());
};

现在我点击 save 时得到一个空对象处理程序。如果我删除 <SubForm/>我从主表单中获取值，但是如果我再次添加第二个表单，我将无法从两个表单中获取数据。
,br> 如何使用 getFieldValue() 从两种表单中单击保存按钮获取数据?
演示: https://codesandbox.io/s/dazzling-ganguly-vz7o7?file=/src/OuterForm.js
我的代码的一部分:

     <Form
        name="main"
        ref={myRef}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        id="ma"
        form={form}
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>
      </Form>
      <SubForm myRef={myRef} />
      <button onClick={save}>save</button>
    </div>

Answer 1

您需要定义 2 个 refs，每个表单一个。

const mainFormRef = useRef();
const subFormRef = useRef();

并在各自的表格上设置这些引用

<Form
  name="main"
  ref={mainFormRef}
  ....
>
  ....
</Form>

<SubForm myRef={subFormRef} />

最后，里面 save函数，调用 getFieldValue在两个引用

const save = () => {
    console.log(mainFormRef.current.getFieldValue());
    console.log(subFormRef.current.getFieldValue());
};