Как получить значение поля ввода при клике по ссылке? - PullRequest
Новая
       37

Как получить значение поля ввода при клике по ссылке?

0 голосов
/ 05 февраля 2020

Я создаю свою форму dynamically, используя json. Но я ударил в одном месте, получая значение поля ввода при клике.

Когда мой демонстрационный приложение запускается .it показывает поле ввода (где Пользователь вводит номер мобильного телефона) и кнопку (отправка текста OTP). После ввода номера примера (9891234178) и нажатия введите введите поле 1004 * и ссылку resend OTP.

Я хочу захватить обработчик кликов из link (Повторная отправка otp) при нажатии. Я хочу получить значение моего поля ввода (значение мобильного номера).

Можно ли получить значение?

Вот мой код https://codesandbox.io/s/react-hook-form-get-started-lokp2

case "link":
  return (
    <div className="form-group">
      <p className="user-link">
        <span onClick={() => {}}> {label}</span>
      </p>
    </div>
  );

enter image description here

Моя цель - добавить обработчик кликов link и попытаться получить значение mobile number , если возможно

любое обновление ????? /

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Существует два метода, которые вы можете прочитать в документации:

Эта функция возвращает все данные формы, и она полезна в функции, когда вы хотите получить значения формы. https://react-hook-form.com/api#getValues

Это будет следить за указанным вводом / вводом и возвращать его значение, и это полезно для определения того, что визуализировать. https://react-hook-form.com/api#watch

0 голосов
/ 06 февраля 2020

Хотя я думаю, что форма logi c немного «сложна», вы можете использовать data, возвращенный из onSubmit, чтобы передать значения обратно в вашу getForm() функцию. 

const App = () => {
  // Create a new `state`
  const [formValues, setFormValue] = useState({})
  //...

  const onSubmit = data => {
    //...
    // assign the form data to the 'formValues' state
    setFormValue(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      {!state
        ? getForm(forgetPasswordConfig, register, errors)
        : getForm(
            forgetPasswordAfterSendingOtpConfig,
            register,
            errors,
            formValues // pass back the values
          )}
    </form>
  )
}

Затем поймайте такие значения: 

export const getForm = (config, register, errors, formValues) => {

  // Based on `state`, formValues will be available and filled after the user clicks on 
  // the first button "Send OTP" and so, you can get the field value by its name "msisdn"

  case "link":
    return (
      <div className="form-group" key={index}>
        <p className="user-link">
          <span onClick={() => console.log(formValues.msisdn)}> {label}</span>
        </p>
      </div>
    )
}

Edit React Hook Form - Get Started

...