React 18中如何为TextField添加千位分隔符？

你的代码存在几个关键问题导致千位分隔符不生效，以下是修复方案：

问题分析 #

1. TextField的type="number"冲突：数字类型输入框不允许逗号（千位分隔符）这类非数字字符，会导致格式化后的内容无法正常显示或更新。
2. 状态值类型不匹配：若totalAmount是数字类型，而react-number-format返回带分隔符的字符串，直接赋值会引发显示异常。

修复后的代码 #

import { NumericFormat } from 'react-number-format';
import { TextField, InputAdornment } from '@mui/material';
import { useState } from 'react';

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumericFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            // 用floatValue获取纯数字值，或value获取带分隔符的字符串，按需选择
            value: values.floatValue || '',
          },
        });
      }}
      thousandSeparator=","
      allowNegative={false}
    />
  );
}

export default function YourComponent() {
  const [totalAmount, setTotalAmount] = useState('');
  const [loanType, setLoanType] = useState('');

  return (
    <TextField
      required
      error={loanType === "I" && (Number(totalAmount) > 100000)}
      fullWidth
      // 移除type="number"，使用默认text类型
      label="Total Amount"
      value={totalAmount}
      onChange={(e) => setTotalAmount(e.target.value)}
      InputProps={{
        inputComponent: NumberFormatCustom,
        startAdornment: (
          <InputAdornment position="start">$</InputAdornment>
        ),
      }}
    />
  );
}

关键修改点说明 #

• 移除type="number"：让TextField接受带千位分隔符的字符串输入，规避浏览器对数字输入的限制。
• 选择合适的数值类型：用floatValue（或integerValue）获取格式化后的纯数字存入状态；若需保留带分隔符的显示格式，直接使用values.value。
• 状态类型适配：根据业务需求将totalAmount设为字符串或数字类型，确保与输入值类型匹配。

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