如何在react-number-format中使用波斯数字？TextField onChange失效问题

问题根源 #

你的NumberFormatCustom组件在传递onChange时，未匹配MUI TextField对输入组件的事件格式要求，导致外层TextField的onChange无法被正确触发，进而数字转换逻辑也无法生效。

修复方案 #

1. 修正NumberFormatCustom组件的事件传递逻辑 #

调整onValueChange的回调处理，确保触发的onChange完全符合MUI的事件结构，同时在内部完成波斯数字到阿拉伯数字的转换：

const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
  props,
  ref
) {
  const { onChange, name, ...other } = props;

  const handleValueChange = (values) => {
    // 处理波斯数字转阿拉伯数字
    const convertedValue = values.value.replace(/[۰-۹]/g, (d) => 
      "۰۱۲۳۴۵۶۷۸۹".indexOf(d)
    );
    
    // 触发TextField的onChange，传递符合要求的事件对象
    onChange({
      target: {
        name,
        value: convertedValue,
      }
    });
  };

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={handleValueChange}
      maxLength={11}
      allowLeadingZeros
      isNumericString
    />
  );
});

2. 正确配置TextField组件 #

确保传递name属性（用于关联表单字段），并正常设置onChange：

<TextField
  label="数字输入框"
  name="numericField"
  InputProps={{
    inputComponent: NumberFormatCustom,
  }}
  onChange={(e) => {
    // 现在可正常获取转换后的数值
    console.log("处理后的值：", e.target.value);
    // 执行表单更新逻辑，比如修改state
    // setFormState(prev => ({ ...prev, [e.target.name]: e.target.value }))
  }}
/>

关键说明 #

• 必须从props中解构name并传递给onChange的target对象，MUI依赖该字段关联表单数据。
• 数字转换逻辑放在组件内部的handleValueChange中，确保每次值变化时自动完成转换，无需外层重复处理。
• 开启isNumericString可保证values.value始终为数字格式字符串，避免非数字输入干扰转换逻辑。

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