Formik: Maskierte Eingänge

Ja, Sie behandeln es einfach wie jede andere benutzerdefinierte Eingabe.

@ Jaredpalmer danke. Ich habe es hier herausgefunden. Wenn jemand sehen möchte, wie ich es gemacht habe (mit react-text-mask ):

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

@ThiagoMiranda Wie haben Sie es geschafft, maskierte Zeichenfolgen zu validieren?
Zum Beispiel mit diesem 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')

Ich erhalte den Wert "0___" und kann nicht für Min-Max-Regeln validieren.

Wie kommt es, dass das nicht funktioniert?

Ich sehe die maskierte Eingabe und ihre Maskierung und Wiedergabe gut, aber wenn ich Werte eingebe, wird maskiert nicht aktualisiert, obwohl ich einen Namen auf dem Feld habe.

Weil Field eine field Requisite übergibt, die MaskedInput Handlern nicht korrekt zugeordnet ist.

Okey, also enthält die Feldstütze nicht alle unbekannten Requisiten von Field

@yyynnn - Ich habe das gleiche Problem getroffen. Am Ende habe ich einen benutzerdefinierten Änderungshandler erstellt, der die Maskenzeichen entfernt und Formiks setFieldValue manuell aufruft.

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 Wie haben Sie es geschafft, maskierte Zeichenfolgen zu validieren?
...
Ich erhalte den Wert "0___" und kann nicht für Min-Max-Regeln validieren.

Bitte sehen Sie für ein anderes Beispiel https://codesandbox.io/s/4rkyylp24w

@ Jaredpalmer danke. Ich habe es hier herausgefunden. Wenn jemand sehen möchte, wie ich es gemacht habe (mit react-text-mask ):

diese Arbeit auch für mich
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>