React Number Format 组件中 defaultValue 与 mask 的配合使用问题解析

在使用 React Number Format 库进行数字格式化时，开发者经常会遇到 defaultValue 与 mask 配合使用的问题。本文将通过一个典型场景，深入分析问题原因并提供解决方案。

问题现象

当开发者尝试使用 PatternFormat 组件，并同时设置 defaultValue 和 mask 属性时，可能会出现格式化结果不符合预期的现象。例如：

<PatternFormat
  type="tel"
  allowEmptyFormatting
  mask="_"
  displayType="input"
  value={380991231231}
  format="+38 0## ### ## ##"
/>

预期结果是显示格式化的电话号码，如 "[phone]"，但实际显示却变成了 "[phone] 31380991231231"。

问题根源

这个问题的根本原因在于对 value 属性的理解不够深入。React Number Format 组件对 value 属性有三种不同的处理方式：

1. 数字类型：只应包含需要格式化的数字部分，不应包含格式字符
2. 数字字符串：同样只包含数字部分，不含格式字符
3. 格式化字符串：必须包含完整的格式化结果

在上面的例子中，value 属性传递了一个包含格式字符(38)的长数字(380991231231)，这导致组件无法正确解析和格式化。

解决方案

根据实际需求，开发者可以选择以下三种方式之一来正确设置 value 属性：

方案一：使用纯数字

<PatternFormat
  value={991231231}  // 仅包含需要格式化的数字部分
  format="+38 0## ### ## ##"
  // 其他属性...
/>

方案二：使用数字字符串

<PatternFormat
  value="991231231"  // 字符串形式的数字
  format="+38 0## ### ## ##"
  // 其他属性...
/>

方案三：使用完整格式化字符串

<PatternFormat
  value="[phone]"  // 完整的格式化结果
  format="+38 0## ### ## ##"
  // 其他属性...
/>

最佳实践

1. 明确数据类型：在使用 value 属性前，先确定要传递的数据类型
2. 保持一致性：确保 value 的内容与 format 的格式要求相匹配
3. 测试验证：在开发过程中，对不同的输入情况进行充分测试
4. 文档参考：详细阅读组件文档，了解各种属性的具体行为

通过正确理解和使用 value 属性，开发者可以充分利用 React Number Format 的强大功能，实现各种复杂的数字格式化需求。