Formik: Маскированные входы

Да, вы просто относитесь к нему как к любому другому пользовательскому вводу.

@jaredpalmer спасибо. Я понял это здесь. Если кто-то хочет увидеть, как я это сделал (используя react-text-mask ):

      input = <Field name={name} render={({ field }) => {
        return <MaskedInput mask={Masks[mappedField.mask]}
            {...field}
            id={name}
            placeholder={mappedField.placeholder[language]} />
      }} />

@ThiagoMiranda, как вам удалось проверить замаскированную строку?
Например, с этим ага:

          passport: yup
            .string()
            .matches(/(^[0-9]+$)/, 'only digits here')
            .required('enter something')
            .min(4, 'Number of digits left: ' + digitsLeft)
            .max(4, 'This is too much')

Я получаю значение «0___» и не могу проверить правила минимального максимума.

Почему это не работает

Я вижу замаскированный ввод, его маскировку и рендеринг хорошо, но когда я набираю values.masked не обновляется, даже если у меня есть имя в поле.

Поскольку Field передает опору field , которая MaskedInput неправильно отображается на обработчики.

Хорошо, так что полевая опора не включает все неизвестные реквизиты из поля

@yyynnn - я столкнулся с той же проблемой. В итоге я создал собственный обработчик изменений, который удаляет символы маски и вручную вызывает Formik setFieldValue .

handleChange = (event, field, form, charsToStrip) => {
  const cleanValue = stripCharacters(event.target.value, charsToStrip)
  form.setFieldValue(field.name, cleanValue)
}

function stripCharacters (string, characters) {
  const re = new RegExp(`[${characters}]+`, 'g')
  return string.replace(re, '')
}

@ThiagoMiranda, как вам удалось проверить замаскированную строку?
...
Я получаю значение «0___» и не могу проверить правила минимального максимума.

пожалуйста, посмотрите другой пример https://codesandbox.io/s/4rkyylp24w

@jaredpalmer спасибо. Я понял это здесь. Если кто-то хочет увидеть, как я это сделал (используя react-text-mask ):

эта работа для меня тоже
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>