Блог

У меня есть две формы antd в одном компоненте. Первая форма представляет собой регистрационную форму, в которой пользователь вводит различную информацию (имя, фамилию, адрес электронной почты и т. Д.). submit Кнопка запускает функцию для открытия модального файла с другой формой, чтобы они могли подтвердить свой номер телефона, сгенерировав код, который им отправляется. После ввода кода и нажатия кнопки verify проверяется, правильный ли это код — тогда я хотел бы, чтобы он зарегистрировал пользователя, но у меня возникают трудности с извлечением значений из первой формы..

Есть ли конкретный способ сделать это? Я подумал, может быть, я мог бы использовать 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');
  }
};
  

Вы можете создать экземпляр формы (хуки) и ссылаться на него на первую форму, чтобы вы могли использовать 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 между формами