Невозможно извлечь номер телефона из пользовательского поля, используя Formik - PullRequest
Новая
       6

Невозможно извлечь номер телефона из пользовательского поля, используя Formik

0 голосов
/ 15 апреля 2020

У меня есть поле ввода для телефонного номера, сделанное из библиотеки «response-phone-input-2»,

Я покажу код для поля ввода, созданного коллегой 

<PhoneInput
      inputProps={{
        name: inputName,
      }}
      country="lb"
      value={phoneNumber}
      placeholder="1234456"
      onChange={phone => handleInputChange(inputName, phone)}
      buttonClass="buttonarrow"
      containerStyle={mainContainer}
      inputStyle={phoneInput(countryCodeBtnWidth, isMobileScreen, hasError)}
      buttonStyle={countryCodeBtn(countryCodeBtnWidth, isMobileScreen)}
      dropdownStyle={dropDownList}
    />

Когда я импортирую это и пытаюсь отправить formik для обработки handleInputOnChange, я не могу извлечь значения, даже если все остальные поля извлекаются таким же образом.

Я отправлю код для извлечения 

<PhoneInputValidation
                name="phoneNumber"
                value={formik.phoneNumber}
                handleInputChange={formik.handleChange}
                hasError={
                  formik.errors.phoneNumber && formik.touched.phoneNumber
                }
                validationMessage={ERROR_REQUIRED}
                onBlur={formik.handleBlur}
              />

phoneInputValidation - это еще один компонент, выполненный из импорта phoneInput, код которого приведен ниже 

<ValidationModule hasError={hasError} validationMessage={validationMessage}>
    <PhoneInputCustom
      handleInputChange={handleInputChange}
      hasError={hasError}
      inputName={name}
      phoneNumber={value}
    />
  </ValidationModule>

пс: использование formik.handleChange для других полей в той же форме работает нормально

1 Ответ

0 голосов
/ 24 апреля 2020

Formik's handleChange принимает 2 типа аргументов:

  • Имя поля [строка]: в этом случае он возвращает функции, в которые можно напрямую передать событие или значение изменения
  • Событие изменения: в этом случае будет получено имя поля для обновления из самого события изменения

https://github.com/jaredpalmer/formik/blob/d4049f2da7e2e8811b498ea8013b77af063c6c8a/packages/formik/src/Formik.tsx#L657 -L667

Ваш Код использует только первую форму: 

<PhoneInput
      ...
      onChange={phone => handleInputChange(inputName, phone)}
      ...
    />

Formik будет игнорировать значение телефона в этом случае. Следующие примеры должны работать. 

<PhoneInput
      ...
      onChange={phone => handleInputChange(inputName)(phone)}
      ...
    />

ИЛИ 

<PhoneInput
      ...
      onChange={phone => handleInputChange({ 
        target: { 
          name: inputName
          value: phone 
        }
      })}
      ...
    />

Также ознакомьтесь с документацией по вводу с телефона, поскольку она дает больше данных с событием изменения, чем только номер телефона:

https://github.com/bl00mber/react-phone-input-2#events

...