将react输入掩码(InputMask)与formik一起使用

Question

我的问题与这个SO问题有些相似，但我无法获得值(只有数字(。

我有以下表单字段

<Field
name={`phoneNumber.value`}
label="Phone Number"
render={({ field }: any) => (
<InputMask
{...field}
mask="[phone]"
placeholder="Enter your phone number"
type="text"
onChange={(e: any) => {
const val = e.target.value.match(/(d+)/);
console.log(val);
formikProps.setFieldValue(
`phoneNumber.value`,
e.target.value,
);
}}
/>
)}
component={TextField}
/>

我的值如下"value":"[phone]"，但我只想要数字(1234567883(。我浏览了多个与formik相关的线程，但都没能找到任何位置。

对此有不同的方法吗？

Answer 1

您将formik字段值设置为输入掩码的结果，该掩码仍然包含格式化的文本。如果只需要数字，可以在设置字段值之前使用正则表达式删除所有非数字值。

onChange={(e) => {
formikProps.setFieldValue(
'phoneNumber.value',
e.target.value.replace(/D/g, '') // removes all non-numeric characters
);
}}

此外，您正试图将数字与正则表达式进行匹配，但只使用e.target.value，而不是使用正则表达式，然后将结果传递给setFieldValue