Alright, so I have this implementation of Input Mask over a custom styled implementation of Material UI's text field, inside a Formik form:
<InputMask
mask="999-99-9999"
maskChar="X"
value={values.ssn}
onChange={handleChange}
onBlur={handleBlur}
className={classNames(
styles.inputField,
styles.override
)}
>
{() => (
<LNTextField
name="ssn"
label="Social Security Number"
error={touched.ssn && errors.ssn ? true : false}
helperText={
touched.ssn && errors.ssn ? "* " + errors.ssn : ""
}
type="text"
/>
)}
</InputMask>
The problem now is that in values.ssn
the value is stored with the mask, with the hyphens and all, I would instead like it to be stored as a number/string with no spaces/masks, how would I go about that?
Per @Kiran LM 's comment codesample, this was acheived by adding this instead of the existing onChange
, aswell as destructuring setFieldValue
from Formik
onChange={e => {
const value =
e.target.value
.replace(/-/g, "")
.replace(/X/g, "") || "";
setFieldValue("ssn", value);
}}
Many thanks to them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.