هل من الممكن استخدام ملحق إدخال قناع (مثل رد فعل-نص-قناع) مع Formik؟
نعم ، أنت تعامله مثل أي إدخال مخصص آخر.
تضمين التغريدة لقد اكتشفت ذلك هنا. إذا كان أي شخص يريد أن يرى كيف فعلت ذلك (باستخدام 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___" ولا يمكنني التحقق من قواعد الحد الأدنى للحد الأقصى.
كيف هذا لا يعمل
أرى الإدخال المقنع وإخفائه وعرضه جيدًا ، ولكن عند كتابة القيم ، لا يتم تحديث Masked ، على الرغم من أن لدي اسمًا في الحقل.
لأن Field
يجتاز خاصية field
، والتي لا يتم تعيينها بشكل صحيح لمعالجات MaskedInput
.
حسنًا ، لا تشتمل خاصية الحقل على جميع الخاصيات غير المعروفة من Field
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___" ولا يمكنني التحقق من قواعد الحد الأدنى للحد الأقصى.
الرجاء الاطلاع على مثال آخر https://codesandbox.io/s/4rkyylp24w
تضمين التغريدة لقد اكتشفت ذلك هنا. إذا كان أي شخص يريد أن يرى كيف فعلت ذلك (باستخدام
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>
التعليق الأكثر فائدة
تضمين التغريدة لقد اكتشفت ذلك هنا. إذا كان أي شخص يريد أن يرى كيف فعلت ذلك (باستخدام
react-text-mask
):