React中阿拉伯数字转英文及两位小数输入限制问题

你的代码核心问题在于输入框值的类型不统一，以及数值转换导致小数点丢失：当输入有效数字（含转换后的阿拉伯数字）时，函数返回parseFloat生成的数值类型，这会直接抹掉末尾的小数点（比如"1."会被转为1），导致用户无法继续输入小数部分；同时初始状态设为数值0，也会干扰输入框的字符串状态维护。

以下是修改后的完整代码，同时满足所有需求：

import React, { useState } from "react";
export default function App() {
  // 初始化为空字符串，保持输入框值始终为字符串类型
  const [val, setVal] = useState("");

  function ARtoENPrice(input) {
    if (typeof input !== "string") return "";
    input = input.trim();
    
    const arabicNums = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
    let output = "";
    let hasDecimal = false;
    let decimalDigitCount = 0;

    for (const char of input) {
      // 处理阿拉伯数字转英文数字
      const arabicIndex = arabicNums.indexOf(char);
      if (arabicIndex !== -1) {
        // 小数部分最多两位，超过则跳过
        if (hasDecimal && decimalDigitCount >= 2) continue;
        output += arabicIndex;
        if (hasDecimal) decimalDigitCount++;
        continue;
      }

      // 处理英文数字
      if (!isNaN(char) && char !== " ") {
        if (hasDecimal && decimalDigitCount >= 2) continue;
        output += char;
        if (hasDecimal) decimalDigitCount++;
        continue;
      }

      // 处理小数点：仅允许出现一次
      if (char === "." && !hasDecimal) {
        hasDecimal = true;
        output += char;
        continue;
      }

      // 其他字符直接过滤
    }

    return output;
  }

  const handleChange = (e) => {
    const processedValue = ARtoENPrice(e.target.value);
    setVal(processedValue);
  };

  return (
    <input type="text" value={val} onChange={handleChange} />
  );
}

关键修改点 #

1. 统一值类型为字符串：输入框的状态始终用字符串维护，避免数值转换丢失小数点等格式信息。
2. 限制小数位数：新增decimalDigitCount变量，监控小数部分的长度，超过两位则不再接收后续数字。
3. 过滤非法字符：仅保留阿拉伯数字、英文数字和单个小数点，其他字符直接跳过。
4. 保留输入状态：允许输入单独的小数点（如.），方便用户继续输入小数部分，不会被自动转为数值。

如果需要在提交时获取数值类型结果，可在提交逻辑中转换：

const finalValue = parseFloat(val) || 0;

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