受控输入中含负号与小数点的数字处理最优方案咨询

要解决受控组件下以number类型存储值时的输入异常问题，核心是在保持state为number类型的同时，兼容输入过程中的中间态（如'-'、'0.'），以下是最优实现方案：

思路分析 #

1. 特殊输入场景处理：在onChange事件中识别用户输入的中间态字符串，针对性更新number类型的state；
2. 动态生成显示值：通过ref记录用户的原始输入字符串，渲染输入框时根据原始输入生成符合用户意图的显示内容，避免显示NaN或不符合预期的数字；
3. 失焦修正（可选）：在输入框失去焦点时，将中间态输入修正为合法数字，保证最终state值的有效性。

代码实现 #

import { useState, useRef } from 'react';

export default function App() {
  const [inputValue, setInputValue] = useState(0);
  const rawInputRef = useRef('0'); // 记录用户原始输入的字符串

  const handleChange = (e) => {
    const rawValue = e.target.value;
    rawInputRef.current = rawValue;

    let num;
    // 处理单独输入'-'的情况
    if (rawValue === '-') {
      num = NaN;
    }
    // 处理末尾带小数点的输入（如'0.'、'123.'）
    else if (rawValue.endsWith('.') && rawValue.length > 1) {
      num = parseFloat(rawValue);
    }
    // 常规输入转换为number，非法输入转为0
    else {
      num = parseFloat(rawValue);
      num = isNaN(num) ? 0 : num;
    }

    setInputValue(num);
  };

  // 生成输入框的显示值
  const getDisplayValue = () => {
    const rawValue = rawInputRef.current;
    if (rawValue === '-') return '-';
    if (rawValue.endsWith('.') && rawValue.length > 1) return rawValue;
    return isNaN(inputValue) ? '' : inputValue;
  };

  // 失焦时修正中间态值为合法数字
  const handleBlur = () => {
    const rawValue = rawInputRef.current;
    if (rawValue === '-') {
      setInputValue(0);
      rawInputRef.current = '0';
    } else if (rawValue.endsWith('.')) {
      const num = parseFloat(rawValue);
      setInputValue(num);
      rawInputRef.current = String(num);
    }
  };

  return (
    <div className="App">
      <input
        type="text"
        value={getDisplayValue()}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {/* 用于验证state的类型和值 */}
      <p>当前state值（number类型）：{inputValue}，类型：{typeof inputValue}</p>
    </div>
  );
}

方案优势 #

• 严格符合要求：state始终为number类型，输入框为受控组件（value由逻辑控制，onChange同步更新state）；
• 输入体验流畅：输入'-'时显示'-'，输入'0.'时显示'0.'，不会出现值跳转为0或NaN的异常；
• 最终值合法：失焦时自动修正中间态为有效数字，避免提交非法值；
• 逻辑清晰：通过ref记录原始输入，分离显示逻辑和state存储逻辑，代码易维护。

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