在 Formik 和 Material-UI 中存储未屏蔽的 InputMask 值

Question

好的，所以我在 Formik 表单中通过 Material UI 文本字段的自定义样式实现实现了 Input Mask：

<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>

现在的问题是，在values.ssn 中，值与掩码、连字符和所有内容一起存储，我希望将其存储为没有空格/掩码的数字/字符串，我该怎么做那个？

Answer 1

根据 @Kiran LM 的评论代码示例，这是通过添加此代码而不是现有的 onChange 以及从 Formik 解构 setFieldValue 来实现的

                      onChange={e => {
                        const value =
                          e.target.value
                            .replace(/-/g, "")
                            .replace(/X/g, "") || "";
                        setFieldValue("ssn", value);
                      }}

非常感谢他们。