Antd InputNumber阿拉伯数字本地化失效问题求助

问题场景 #

使用Antd的InputNumber组件时，已在ConfigProvider中配置阿拉伯语（埃及）locale（arEg）并设置RTL方向，但InputNumber内的数字仍显示为英文格式。需求为实际值保留英文数字（适配后端处理），前端显示为阿拉伯数字格式。

相关配置代码：

<ConfigProvider
  theme={bashqashTheme}
  direction={locale === "ar" ? "rtl" : "ltr"}
  locale={locale === "ar" ? arEg : enUk}
>
  <AntdApp>
    <Refine
      i18nProvider={i18nProvider(t, i18n)}
      authProvider={authProvider}
      accessControlProvider={accessControlProvider}
      dataProvider={{
        default: dataProvider(API_URL),
        ecommerce: dataProvider(ECOMMERCE_API_URL),
        openStreetMap: dataProvider(OPEN_STREET_API),
      }}
      routerProvider={routerProvider}
      resources={resources(t)}
      notificationProvider={useNotificationProvider}
      options={{
        syncWithLocation: true,
        warnWhenUnsavedChanges: false,
      }}
    >
      <>
        <AppRoutes />
        <UnsavedChangesNotifier />
        <DocumentTitleHandler />
      </>
    </Refine>
    <FloatButton.BackTop />
  </AntdApp>
</ConfigProvider>

当前异常显示：

解决方案 #

Antd默认locale配置未覆盖InputNumber的数字显示转换逻辑，需通过formatter和parser属性手动实现显示与实际值的分离转换：

1. 编写数字转换工具函数 #

实现英文数字与阿拉伯数字的双向转换：

// 英文数字转阿拉伯数字（用于前端显示）
const enToArNumber = (num) => {
  if (num === null || num === undefined) return '';
  const arDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
  return num.toString().replace(/\d/g, digit => arDigits[digit]);
};

// 阿拉伯数字转英文数字（用于解析实际值）
const arToEnNumber = (str) => {
  if (!str) return '';
  const enDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
  const arDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
  return str.replace(/[٠-٩]/g, arDigit => enDigits[arDigits.indexOf(arDigit)]);
};

2. 为InputNumber配置转换逻辑 #

在使用InputNumber的位置，根据当前locale启用转换：

import { InputNumber } from 'antd';

// 假设当前locale已通过上下文或状态获取
const currentLocale = 'ar';

<InputNumber
  // 保留原有组件属性
  formatter={(value) => {
    if (currentLocale === 'ar' && value !== null) {
      return enToArNumber(value);
    }
    return value;
  }}
  parser={(displayValue) => {
    if (currentLocale === 'ar') {
      return Number(arToEnNumber(displayValue));
    }
    return Number(displayValue);
  }}
/>

3. 可选：封装全局兼容组件 #

若多处使用，可封装为通用组件简化调用：

import { InputNumber } from 'antd';
import { useContext } from 'react';
// 假设存在LocaleContext存储当前语言
import { LocaleContext } from '../contexts/LocaleContext';

const ArCompatibleInputNumber = (props) => {
  const { locale } = useContext(LocaleContext);

  const enToArNumber = (num) => {
    if (num === null || num === undefined) return '';
    const arDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
    return num.toString().replace(/\d/g, digit => arDigits[digit]);
  };

  const arToEnNumber = (str) => {
    if (!str) return '';
    const enDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    const arDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
    return str.replace(/[٠-٩]/g, arDigit => enDigits[arDigits.indexOf(arDigit)]);
  };

  return (
    <InputNumber
      {...props}
      formatter={(value) => {
        if (locale === 'ar' && value !== null) {
          return enToArNumber(value);
        }
        return props.formatter ? props.formatter(value) : value;
      }}
      parser={(displayValue) => {
        if (locale === 'ar') {
          return Number(arToEnNumber(displayValue));
        }
        return props.parser ? props.parser(displayValue) : Number(displayValue);
      }}
    />
  );
};

export default ArCompatibleInputNumber;

注意事项 #

• formatter仅负责前端显示转换，parser需将用户输入的阿拉伯数字转回标准英文数字，确保传给后端的值格式正确。
• 若需处理小数、千分位等场景，需在转换函数中补充对应逻辑（如适配阿拉伯语千分位分隔符）。

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