是否可以在Formik中使用Mask输入插件(例如react-text-mask)?
是的,您就像对待其他任何自定义输入一样对待它。
@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
传递了field
道具,所以MaskedInput
无法正确映射到处理程序。
Okey,所以野战道具不包括野战中所有未知的道具
@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___”,并且无法验证最小最大规则。
@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>
最有用的评论
@jaredpalmer谢谢。 我已经在这里弄清楚了。 如果有人想看看我是如何做到的(使用
react-text-mask
):