React Number Format 库中的模式格式化功能详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00950/article/details/148550088

React Number Format 库中的模式格式化功能详解

react-number-format React component to format numbers in an input or as a text. 项目地址: https://gitcode.com/gh_mirrors/re/react-number-format

前言

在开发表单应用时，我们经常需要处理各种数字和文本的格式化需求。React Number Format 库提供了一个强大的 PatternFormat 组件，专门用于按照特定模式格式化输入内容。本文将深入解析该组件的各项功能和使用方法。

核心功能概述

PatternFormat 组件允许开发者通过定义模式字符串来格式化输入内容，主要特点包括：

支持自定义占位符
提供掩码功能
处理空值格式化
提供丰富的格式化控制选项

基础用法

基本格式化

最简单的用法是通过 format 属性定义格式模式：

import { PatternFormat } from 'react-number-format';

<PatternFormat value={123123} format="### ###" />

上述代码会将数字 123123 格式化为 123 123 的形式。

自定义占位符

默认使用 # 作为数字占位符，但可以通过 patternChar 属性修改：

<PatternFormat format="%% (%%%)" patternChar="%" value={23456} />

这将使用 % 作为占位符，输出结果为 23 (456)。

高级功能详解

空值处理

默认情况下，当值为空（null、undefined 或空字符串）时，组件不会应用格式化。如果需要处理空值情况，可以设置 allowEmptyFormatting 属性：

<PatternFormat 
  format="+1 (###) #### ###" 
  allowEmptyFormatting 
  mask="_" 
/>

掩码功能

掩码（mask）用于在数字占位符未被填充时显示特定字符：

<PatternFormat 
  value="411111" 
  valueIsNumericString 
  format="#### #### #### ####" 
  mask="_" 
/>

也可以为不同位置指定不同的掩码字符：

<PatternFormat 
  format="### ### ###" 
  mask={['_', '_', '_', 'x', 'x', 'x', 'y', 'y', 'y']} 
/>

底层工具函数

React Number Format 还提供了一些底层工具函数，可用于更高级的自定义场景：

patternFormatter

直接格式化数字字符串：

import { patternFormatter } from 'react-number-format';

const formattedValue = patternFormatter('123456', {
  format: '###-###',
  mask: '_'
});
// 返回 "123-456"

removePatternFormat

从格式化字符串中提取原始数字：

import { removePatternFormat } from 'react-number-format';

const numString = removePatternFormat(
  '123-45_', 
  changeMeta, 
  { format: '###-###' }
);
// 可能返回 "12345"

getPatternCaretBoundary

获取光标可停留位置的边界信息：

import { getPatternCaretBoundary } from 'react-number-format';

const boundaries = getPatternCaretBoundary(
  '123-456', 
  { format: '###-###' }
);
// 返回布尔值数组，表示哪些位置允许光标停留

usePatternFormat Hook

对于需要高度自定义的场景，可以使用 usePatternFormat Hook：

import { usePatternFormat, NumberFormatBase } from 'react-number-format';

function CustomPatternFormat(props) {
  const formatProps = usePatternFormat(props);
  
  // 可以在这里修改 formatProps 中的方法
  
  return <NumberFormatBase {...formatProps} />;
}