两种 Antd 形式，一个组件

Question

我在一个组件中有两个 antd 表单。第一个表单是一个注册表单，用户在其中输入各种信息（名字、姓氏、电子邮件等）。submit 按钮触发一个功能，打开一个带有另一个表单的模式，让他们通过生成代码来验证他们的电话号码那是发短信给他们的。一旦输入代码并且他们点击验证，它会验证它是否是正确的代码 - 然后我希望它注册用户，但我很难从第一个表单中提取值..

有没有特定的方法可以做到这一点？我想也许我可以利用 useState 并将值设置为组件级状态，但即使这样也没有用..

表格

<Form
  layout="vertical"
  name="register-form"
  initialValues={initialValues}
  onFinish={handleVerification}
>
  <Row gutter={ROW_GUTTER}>
    <Col xs={24} sm={24} md={12}>
      <Form.Item
        name="firstName"
        label="First Name"
        rules={rules.firstName}
        hasFeedback
      >
        <Input placeholder="Enter First Name" />
      </Form.Item>
    </Col>
    <Col xs={24} sm={24} md={12}>
      <Form.Item
        name="lastName"
        label="Last Name"
        rules={rules.lastName}
        hasFeedback
      >
        <Input placeholder="Enter Last Name" />
      </Form.Item>
    </Col>
  </Row>
  <Row gutter={ROW_GUTTER}>
    <Col xs={24} sm={24} md={12}>
      <Form.Item
        name="phone"
        label="Phone Number"
        rules={rules.phone}
        hasFeedback
      >
        <Input placeholder="Enter Phone Number" />
      </Form.Item>
    </Col>
    <Col xs={24} sm={24} md={12}>
      <Form.Item name="city" label="City" rules={rules.city} hasFeedback>
        <Select placeholder="Select City">
          <Option value="Lancaster, PA">Lancaster, PA</Option>
        </Select>
      </Form.Item>
    </Col>
  </Row>
  <Form.Item
    name="email"
    label="Email Address"
    rules={rules.email}
    hasFeedback
  >
    <Input placeholder="Enter Email Address" />
  </Form.Item>
  <Form.Item
    name="password"
    label="Password"
    rules={rules.password}
    hasFeedback
  >
    <Input.Password placeholder="Enter Password" />
  </Form.Item>
  <Form.Item
    name="confirmPassword"
    label="Confirm Password"
    rules={rules.confirm}
    hasFeedback
  >
    <Input.Password placeholder="Confirm Password" />
  </Form.Item>
  <Form.Item name="tos" valuePropName="checked">
    <Checkbox>
      I agree to the <Link to="/">Terms of Service</Link> and{' '}
      <Link to="/">Privacy Policy</Link>.
    </Checkbox>
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit" block>
      Register
    </Button>
  </Form.Item>
</Form>

<Modal
  title="Account Verification"
  centered
  visible={modal}
  onOk={() => setModal(false)}
  onCancel={() => setModal(false)}
>
  <p>
    To finish registering, please enter the verification code we just sent
    to your phone. If you didn't receive a code, make sure your entered
    phone number is correct and sign up again. Your code will expire upon
    closing this popup.
  </p>
  <Form layout="vertical" name="verify-phone-form" onFinish={onSubmit}>
    <Form.Item name="enteredCode" label="Verify">
      <Input placeholder="Enter Code" />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit" block>
        Verify
      </Button>
    </Form.Item>
  </Form>
</Modal>

句柄验证

const handleVerification = async (values) => {
  const { phone, email } = values;

  setModal(true);
  try {
    const response = await postRegisterCheckDuplicate({ email, phone });

    if (response.data.success) {
      switch (response.data.message) {
        case 0:
          try {
            const response = await dispatch(
              attemptRegisterVerify({ to: phone })
            );
            console.log('handleVerification: ', response.message);
            if (response.success) {
              setGeneratedCode(response.message);
            } else {
              console.log(response.message);
            }
          } catch (error) {
            console.log(error);
          }
          break;

        case 1:
          console.log('Email Address already in use.');
          break;
        case 2:
          console.log('Phone number already in use.');
          break;
        case 3:
          console.log('Email and Phone in use.');
          break;
      }
    } else {
      console.log(response.data.message);
    }
  } catch (error) {
    console.log(error);
  }
};

onSubmit

const onSubmit = (values) => {
  const { enteredCode } = values;
  if (generatedCode === enteredCode) {
    try {
      console.log('values :', values);
      // dispatch(attemptRegister(values));
    } catch (error) {
      console.log(error);
    }
  } else {
    console.log('Verification code incorrect');
  }
};

Answer 1

您可以创建一个表单实例（挂钩）并将其引用到第一个表单，以便您可以使用该实例的 api。你可以在这里查看更多antd FormInstance

const [registerForm] = Form.useForm();

const handleSubmit = (values) => {
    const { enteredCode } = values;
    console.log(registerForm.getFieldsValue());
    //output is the values in the first form
};

<Form form={registerForm} layout="vertical" onFinish={handleVerification}>
    ...
</Form>

我创建了您作品的一个小版本。在此处查看工作代码：

你也可以查看这个antd control between forms