React中如何让输入框仅接受0到1之间的合法浮点数？

问题根源 #

1. 状态使用数值类型（number）：用户输入中间值（如0.）时，parseFloat会将其转为0，导致输入框回显0，无法继续输入小数部分。
2. 原正则不允许输入过程中的合法中间状态（如0.），同时错误允许了1.0+这类不符合要求的格式。
3. 输入框绑定数值类型值时，会自动格式化用户输入（如去掉末尾的.），破坏输入体验。

修改后的完整代码 #

1. 调整状态与校验函数

import { useState, SyntheticEvent } from 'react';

// 输入过程校验：允许合法的中间输入（如0.、0.1）
export const validateInputFloat = (value: string) => {
  const pattern = /^(0(\.\d*)?|1)$/;
  return pattern.test(value);
};

// 最终提交校验：严格符合约束要求
export const validateFinalFloat = (value: string) => {
  const pattern = /^(0(\.\d+)?|1)$/;
  return pattern.test(value);
};

const Page = () => {
  // 改为字符串类型状态，保留用户原始输入
  const [currentElectricityPrice, setCurrentElectricityPrice] = useState("0");

  const onCurrentElectricityPriceChange = (
    event: SyntheticEvent<HTMLInputElement>
  ) => {
    const { value } = event.currentTarget;
    // 处理空输入（可选：清空或重置为0）
    if (value === "") {
      setCurrentElectricityPrice("");
      return;
    }
    // 仅允许符合输入规则的内容
    if (validateInputFloat(value)) {
      setCurrentElectricityPrice(value);
    }
  };

  // 失焦时修正不合法的中间状态（如0.）
  const onBlur = () => {
    if (!validateFinalFloat(currentElectricityPrice)) {
      switch(currentElectricityPrice) {
        case "0.":
          setCurrentElectricityPrice("0");
          break;
        case "":
          setCurrentElectricityPrice("0");
          break;
        // 其他非法情况可按需处理
      }
    }
  };

  return (
    <>
      {/* ...其他组件 */}
      <TextField
        ID=""
        placeholder=""
        value={currentElectricityPrice}
        onChange={onCurrentElectricityPriceChange}
        onBlur={onBlur}
        outline
        unit="€/kWh"
        step={0.01}
        type="text" // 使用text类型避免自动格式化
      />
    </>
  );
};

规则验证（符合你的约束） #

• ❌ 000.00：输入00时会被输入正则拦截，无法继续输入
• ❌ 111：输入11时会被输入正则拦截，无法继续输入
• ✅ 0.1111：输入过程（0→0.→0.1→...→0.1111）全程合法，最终通过严格校验
• ✅ 1：可直接输入，通过严格校验
• ❌ 1.0：输入1.时会被输入正则拦截，无法继续输入后续数字

关键说明 #

• 状态改为字符串类型：保留用户输入的原始格式，避免数值自动格式化导致的输入中断
• 双校验机制：输入过程宽松允许中间状态，失焦/提交时严格校验最终值
• 输入正则限制：直接拦截非法输入（如多位数开头、1后加小数点等）

内容的提问来源于stack exchange，提问作者Ala Eddine Menai