在 formik 中使用反应输入掩码 (InputMask)

Question

我的问题有点类似于 SO 问题，但我无法获得值（只是数字）。

我有以下 formikField

<Field
  name={`phoneNumber.value`}
  label="Phone Number"
  render={({ field }: any) => (
    <InputMask
      {...field}
      mask="(999) 999-9999"
      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":"(213) 456-7883" 但我只想要数字 (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

在 formik 中使用反应输入掩码 (InputMask)

Using react input mask (InputMask) with formik

input-mask

reactjs

formik