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 어떻게 마스크 된 문자열의 유효성을 검사 할 수 있었습니까?
예를 들어 다음과 같은 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')

나는 값 "0___"을 얻고 최소 최대 규칙에 대해 유효성을 검사 할 수 없습니다.

이것이 작동하지 않는 이유

마스킹 된 입력과 마스킹 및 렌더링이 잘 표시되지만 필드에 이름이 있어도 values.masked를 입력하면 업데이트되지 않습니다.

Field 는 field prop을 전달하기 때문에 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>