如何从react-number-format库获取数值类型的返回值？

1. 是否为默认行为 #

是，这是该组件的默认设计。因为你配置了$前缀、千位分隔符等格式化规则，组件默认输出的是符合展示规则的完整格式化字符串，本身就只能为字符串类型。

2. 获取数字类型值的方案 #

最稳妥的方式是使用组件内置的onValueChange回调，不需要手动清洗特殊符号，组件已经帮你处理了前缀、千位分隔符的过滤和数值转换：

import { useState } from 'react';
import NumberFormat from 'react-number-format';

// 组件内部逻辑
const [inputValue, setInputValue] = useState(0); // 直接存储数字类型值

<NumberFormat
  thousandSeparator={true}
  prefix={"$"}
  decimalScale={2}
  fixedDecimalScale
  disabled={isDisabled}
  // 新增onValueChange回调
  onValueChange={(values) => {
    // values对象包含三个属性：
    // formattedValue: 带格式的完整字符串，如"$1,299.99"
    // value: 去掉格式后的纯数字字符串，如"1299.99"
    // floatValue: 转换完成的数字类型值，如1299.99，空输入时为undefined
    setInputValue(values.floatValue ?? 0);
  }}
/>

如果需要自行处理已拿到的格式化字符串，也可以用正则清洗后转换：

const formattedStr = "$1,299.99";
// 去掉所有非数字、小数点的字符
const cleanStr = formattedStr.replace(/[^0-9.]/g, '');
// 转换为数字，空值兜底为0
const numValue = cleanStr ? parseFloat(cleanStr) : 0;

注意：优先使用官方提供的floatValue，自行清洗字符串容易出现边界问题（如负数符号被误删、多个小数点等异常场景处理遗漏）。

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