如何在react-number-format中移除掩码并提交纯数字手机号

要实现提交纯数字手机号并移除输入掩码的需求，对现有代码做以下关键调整即可：

1. 传递纯数字原始值给表单：react-number-format的onChange事件会返回包含formattedValue（格式化后的值）和value（纯数字原始值）的对象，将value传给React Hook Form的onChange，确保表单存储的是纯数字。

2. 移除输入掩码：删除mask="_"属性，设置allowEmptyFormatting={false}，让输入框为空时不再显示占位掩码字符。

3. 简化状态管理：无需单独维护本地手机号状态，直接把Controller的字段值（纯数字）传给NumberFormat的value属性，组件会自动处理显示格式化后的内容。

4. 清理冗余代码：去掉Controller上多余的onChange属性，表单状态通过render prop中的onChange处理即可。

修改后的完整代码：

<Controller
  control={control}
  name="phoneNumber"
  rules={{
    required: true,
    minLength: {
      value: 11,
      message: "*Заполните полностью поле телефона"
    }
  }}
  render={({ field: { onChange, onBlur, value } }) => (
    <>
      <NumberFormat
        type="tel"
        format="+7 (###) ###-####"
        allowEmptyFormatting={false}
        onBlur={onBlur}
        value={value}
        onChange={(values) => onChange(values.value)}
      />
      <WarrningError>
        {errors?.phoneNumber && (
          <p>
            {errors?.phoneNumber?.message || `*Необходимо заполнить поле "Номер телефона"`}
          </p>
        )}
      </WarrningError>
    </>
  )}
/>

说明 #

• 表单提交时，phoneNumber字段的值为纯数字格式（如71231231231），符合业务要求。
• 输入框显示格式化后的手机号，但不会显示空掩码占位符。
• 验证规则基于纯数字值，确保长度符合要求。

内容的提问来源于stack exchange，提问作者SanManjiro