React Material UI TextField添加千分位与美元符号报错求助

问题原因分析 #

• 警告1：TextField的name属性不会自动传递给自定义的inputComponent，导致NumericFormatCustom组件接收不到name prop。
• 警告2：TextField绑定的原始数字值与NumericFormat渲染的格式化字符串不匹配，浏览器无法将格式化后的字符串解析为数字输入框的有效值。

修正后的完整代码 #

import TextField from "@mui/material/TextField";
import React, { useState, useContext } from "react";
import { PropertyContext } from "components/PropertyContext";
import NumericFormat from "react-number-format";

const NumericFormatCustom = React.forwardRef((props, ref) => {
  const { onChange, name, value, ...other } = props;

  const handleValueChange = (values) => {
    console.log("CHANGED ", values);
    // 传递解析后的原始数字给父组件
    onChange({
      target: {
        name,
        value: values.floatValue || 0,
      },
    });
  };

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={handleValueChange}
      thousandSeparator
      prefix="$"
      value={value}
      displayType="input"
    />
  );
});

export default function TextFieldTest(props) {
  const { property } = useContext(PropertyContext);
  // 初始化状态存储原始数字值
  const [values, setValues] = useState({
    numberformat: 0,
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  return (
    <TextField
      label="react-number-format"
      value={values.numberformat}
      onChange={handleChange}
      name="numberformat"
      id="formatted-numberformat-input"
      InputProps={{
        inputComponent: NumericFormatCustom,
        // 显式传递name和原始值给自定义输入组件
        inputProps: {
          name: "numberformat",
          value: values.numberformat,
        },
      }}
      variant="standard"
      type="text"
    />
  );
}

关键修改点 #

1. 显式传递props：在TextField的InputProps.inputProps里手动传递name和原始数字value，解决name未定义的警告。
2. 利用组件内置解析值：直接使用react-number-format返回的floatValue获取解析后的数字，无需手动处理符号和逗号，简化逻辑。
3. 修改输入类型：将TextField的type设为text，避免浏览器对数字输入框的格式校验，消除解析失败的警告。
4. 补充状态定义：添加useState管理输入值，确保绑定的是原始数字，与NumericFormat的输入要求匹配。

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