Использование реагирующей маски ввода (InputMask) с formik - PullRequest
Новая
       48

Использование реагирующей маски ввода (InputMask) с formik

0 голосов
/ 24 октября 2019

Мой вопрос чем-то похож на этот ТАК вопрос, но я не могу получить значение (только цифры).

У меня есть следующее formikField 

<Field
  name={`phoneNumber.value`}
  label="Phone Number"
  render={({ field }: any) => (
    <InputMask
      {...field}
      mask="(999) 999-9999"
      placeholder="Enter your phone number"
      type="text"
      onChange={(e: any) => {
        const val = e.target.value.match(/(\d+)/);
        console.log(val);
        formikProps.setFieldValue(
          `phoneNumber.value`,
          e.target.value,
        );
      }}
    />
  )}
  component={TextField}
/>

Мойзначение получается следующим образом "value":"(213) 456-7883", но я просто хочу цифры (1234567883). Я просмотрел несколько тем, связанных с formik, но не смог никуда добраться.

Есть ли другой подход к этому?

1 Ответ

1 голос
/ 24 октября 2019

Вы устанавливаете значение поля formik в качестве результата маски ввода, которая все еще содержит отформатированный текст. Если вам нужны только цифры, вы можете использовать регулярное выражение для удаления всех нечисловых значений перед установкой значения поля. 

onChange={(e) => {
  formikProps.setFieldValue(
    'phoneNumber.value',
     e.target.value.replace(/\D/g, '') // removes all non-numeric characters
  );
}}

Кроме того, вы пытаетесь сопоставить числовые значения с регулярным выражением, но затем просто используете e.target.value, вместо использования регулярного выражения и передачи этого результата в setFieldValue

...