React + TypeScript实现BRL货币输入掩码需求求助

因为你用的是受控数字输入，要加BRL掩码得处理显示格式字符串和实际数字值的分离——state存数字，输入框显示格式化后的货币字符串，同时处理用户输入的解析。

方案一：自定义工具函数（完全可控） #

先写两个核心工具函数，负责数字和BRL格式的互转：

// 把数字转成BRL货币格式字符串
const formatBRL = (value: number | null): string => {
  if (!value) return '';
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    minimumFractionDigits: 2,
  }).format(value);
};

// 把BRL格式字符串解析成数字
const parseBRL = (formattedValue: string): number => {
  // 移除货币符号、千分位点，把逗号换成小数点
  const cleaned = formattedValue.replace(/[R$\s.]/g, '').replace(',', '.');
  return parseFloat(cleaned) || 0;
};

然后修改你的组件使用逻辑，把输入框类型改成text（因为number类型没法显示货币符号、逗号这些非数字字符）：

import { useState, useEffect } from 'react';

// 假设你的初始state
const [rawValue, setRawValue] = useState<number>(0);
const [displayValue, setDisplayValue] = useState<string>('');

// 初始化或rawValue变化时更新显示值
useEffect(() => {
  setDisplayValue(formatBRL(rawValue));
}, [rawValue]);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const parsedNumber = parseBRL(e.target.value);
  setRawValue(parsedNumber);
  // 实时同步显示格式
  setDisplayValue(formatBRL(parsedNumber));
};

// 渲染组件
<InputAnimation
  required
  type="text"
  placeholder=" "
  label="Valor"
  onChange={handleInputChange}
  value={displayValue}
/>

方案二：用现成的TS友好库（快捷省事） #

用react-input-mask，这个库原生支持TypeScript，不用自己写掩码逻辑：

1. 安装依赖

npm install react-input-mask @types/react-input-mask

2. 包裹你的InputAnimation组件使用：

import InputMask from 'react-input-mask';
import { useState } from 'react';

const [rawValue, setRawValue] = useState<number>(0);

const MaskedCurrencyInput = () => (
  <InputMask
    mask="R$ 999.999.999,99"
    maskChar=" "
    value={formatBRL(rawValue)}
    onChange={(e) => setRawValue(parseBRL(e.target.value))}
  >
    {/* 把InputAnimation作为子组件传入，继承掩码的输入属性 */}
    {(inputProps) => (
      <InputAnimation
        {...inputProps}
        required
        label="Valor"
        placeholder=" "
      />
    )}
  </InputMask>
);

// 直接渲染这个封装好的组件
<MaskedCurrencyInput />

两种方案选哪种都行：自定义的适合需要完全控制解析/格式化逻辑的场景；用库的省时间，减少重复代码。

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