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___」を取得し、最小最大ルールを検証できません。

plsは別の例については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>