Formik: Input terselubung

Yup, Anda memperlakukannya seperti input khusus lainnya.

@jaredpal terima kasih. Saya sudah menemukan jawabannya di sini. Jika ada yang ingin melihat bagaimana saya melakukannya (menggunakan react-text-mask ):

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

@ThiagoMiranda bagaimana Anda berhasil memvalidasi string bertopeng?
Misalnya dengan yup ini:

          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')

saya mendapatkan nilai "0___" dan tidak dapat memvalidasi aturan min maks.

Kenapa ini tidak berhasil

Saya melihat input bertopeng dan masking dan renderingnya bagus, tetapi ketika saya mengetik values.masked tidak memperbarui, meskipun saya memiliki nama di Field.

Karena Field memberikan field prop, yang tidak dipetakan dengan benar ke penangan MaskedInput .

Oke, jadi prop bidang tidak menyertakan semua properti tak dikenal dari Field

@yyynnn - Saya mengalami masalah yang sama. Saya akhirnya membuat penangan perubahan khusus yang menghapus karakter topeng dan panggilan manual 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 bagaimana Anda berhasil memvalidasi string bertopeng?
...
saya mendapatkan nilai "0___" dan tidak dapat memvalidasi aturan min maks.

tolong lihat contoh lain https://codesandbox.io/s/4rkyylp24w

@jaredpal terima kasih. Saya sudah menemukan jawabannya di sini. Jika ada yang ingin melihat bagaimana saya melakukannya (menggunakan react-text-mask ):

ini bekerja untuk saya juga
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>