Formik: Entrées masquées

Oui, vous le traitez comme n'importe quelle autre entrée personnalisée.

@jaredpalmer merci. Je l'ai compris ici. Si quelqu'un veut voir comment je l'ai fait (en utilisant react-text-mask ):

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

@ThiagoMiranda comment avez-vous réussi à valider la chaîne masquée?
Par exemple avec ce yup:

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

J'obtiens la valeur "0___" et je ne peux pas valider les règles min max.

Pourquoi ça ne marche pas

Je vois l'entrée masquée, son masquage et son rendu, mais lorsque je tape values.masked ne se met pas à jour, même si j'ai un nom sur le champ.

Parce que Field passe un objet field , qui MaskedInput ne correspond pas correctement aux gestionnaires.

Okey donc les accessoires de terrain n'incluent pas tous les accessoires inconnus de Field

@yyynnn - J'ai rencontré le même problème. J'ai fini par créer un gestionnaire de modification personnalisé qui supprime les caractères du masque et appelle manuellement setFieldValue Formik.

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 comment avez-vous réussi à valider la chaîne masquée?
...
J'obtiens la valeur "0___" et je ne peux pas valider les règles min max.

pls voir pour un autre exemple https://codesandbox.io/s/4rkyylp24w

@jaredpalmer merci. Je l'ai compris ici. Si quelqu'un veut voir comment je l'ai fait (en utilisant react-text-mask ):

ce travail pour moi aussi
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>