Как получить данные из компонента формы и передать методу в React?

#reactjs

Вопрос:

В проекте React у меня есть компонент формы, который получает входные данные, такие как адрес электронной почты, пароль и передает метод отправки. В методе ‘requestOTP’ требуется электронная почта от компонента формы. Какое может быть подходящее решение для получения этих данных электронной почты из формы и передачи в метод requestOTP? Ниже приведен код для справки.

 <form onSubmit={handleSubmit(onSubmit)}>
    <Controller
          control={control}
          name="email"
          render={({ onChange, value, ref }) => (
            <Input
              placeholder="EMAIL"
              onChange={onChange}
              ref={ref}
              value={value}
              type="email"
            />
            
          )}
          rules={{
            required: "Please enter email",
            pattern: {
              value: /^[A-Z0-9._% -] @[A-Z0-9.-] .[A-Z]{2,}$/i,
              message: "Invalid email address"
            }
          }}
        />

   <div className={classes2.root}>
    <Button
        variant="contained"
        type="submit"
      >
          LOG IN
      </Button>
    </div>
</form>

 <form onSubmit={handleSubmit(requestOtp)}>
    <Button
        variant="contained"
        type="submit"
      >
                GET AN OTP ON YOUR EMAIL
      </Button>
</form>

 const requestOtp = async (data) => {
{/* I want email data from form component here */}
}

1. То есть, когда вы нажимаете логин, он передает электронное письмо на серверную часть и проверяет, правильно это или нет, затем, если это был успешный ответ, вы загружаете «ПОЛУЧИТЬ OTP НА СВОЙ EMAIL»?

2. Раньше я тоже думал аналогично, но здесь работа немного отличается. Как будто вам нужна проверка подлинности, следовательно, OTP будет отправлен по почте. Итак, для этого требуется электронная почта

3. Тогда почему нельзя отправить OTP в том же запросе на вход?

4. Здесь это нужно только для аутентификации… Итак, здесь я хочу извлечь только значение электронной почты, которое изменяется при вводе ввода электронной почты. Затем получите это значение и передайте методу requestOtp

5. Извините, не очень понятно, чего вы пытаетесь достичь

Ответ №1:

У прослушивателя событий onSubmit уже есть целевые значения. Например, если у вас есть входной тег с именем «email» в вашей форме (то есть <input name="email" ... /> )

 function handleSubmit(e) {
  const email = e.target['email'].value;
  //... and then pass email to the requestOTP function
}