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___" मिलती है और कैंट वेरीफाइड होता है।

यह कैसे काम नहीं करता है

मैं नकाबपोश इनपुट और उसके मास्किंग और प्रतिपादन को अच्छी तरह से देखता हूं, लेकिन जब im टाइपिंग मानों को अपडेट किया गया है, भले ही मैं फ़ील्ड पर नाम रखता हूं, फिर भी अपडेट नहीं कर रहा हूं।

क्योंकि Field एक field प्रोप से गुजरता है, जो MaskedInput सही ढंग से हैंडलर को मैप नहीं करता है।

ओके इसलिए फील्ड प्रोप फील्ड से सभी अज्ञात प्रॉप्स सहित नहीं है

@yyynnn - मैंने उसी मुद्दे को मारा है। मैंने एक कस्टम चेंज हैंडलर बनाना शुरू कर दिया है जो मास्क पात्रों को स्ट्रिप करता है और फॉर्मिक के 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>