React数字输入框清空时NaN错误及输入前置0问题解决

问题场景 #

React应用中绑定状态的number类型输入框，用户清空所有字符时会触发NaN错误。曾尝试将空值转为0，但用户再次输入时0会保留在输入框左侧，影响输入体验，现寻求可行解决办法。

原尝试代码 #

输入框 onChange 处理函数 #

const changePresupuestoObraInput = (e: ChangeEvent<HTMLInputElement>) => {

    // 尝试将空值转成0
    if(isNaN(parseFloat(e.target.value))){
      const number = Number(e.target.value);
      setEditInputPresupuestoObra(number)
    };

    // 解析有效值并存入状态
    if(!isNaN(parseFloat(e.target.value))){
      const number = parseFloat(e.target.value)
      setEditInputPresupuestoObra(number)
    };
    
    // 更新 obra 信息
    if (obraInfo) {
      setObraInfo({ id: obraInfo.id, name: obraInfo.name, direccion: obraInfo.direccion, presupuesto: editInputPresupuestoObra })
    }
}

输入框组件代码 #

<input type="number" readOnly={readOnlyBoolean} value={editInputPresupuestoObra} onChange={changePresupuestoObraInput} name="presupuestoObra" />

可行解决办法 #

方案1：分离显示状态与数值状态 #

核心思路是用两个状态分别管理输入框的显示内容和实际存储的数值：

• 显示状态：允许为空字符串，用户清空时输入框显示空白
• 数值状态：始终存储数字类型，空输入时自动转为0（或业务需求的默认值）

步骤1：调整状态定义

// 控制输入框显示的状态，支持空字符串
const [displayValue, setDisplayValue] = useState<string>(editInputPresupuestoObra.toString());
// 实际业务使用的数值状态
const [editInputPresupuestoObra, setEditInputPresupuestoObra] = useState<number>(0);

步骤2：修改 onChange 处理逻辑

const changePresupuestoObraInput = (e: ChangeEvent<HTMLInputElement>) => {
  const inputVal = e.target.value;
  // 更新显示状态，直接同步输入内容
  setDisplayValue(inputVal);

  // 处理数值：空输入设为0，否则转成数字
  const numVal = inputVal === '' ? 0 : parseFloat(inputVal);
  setEditInputPresupuestoObra(numVal);

  // 更新 obraInfo 数据
  if (obraInfo) {
    setObraInfo({
      ...obraInfo,
      presupuesto: numVal
    });
  }
};

步骤3：修改输入框绑定

<input 
  type="number" 
  readOnly={readOnlyBoolean} 
  value={displayValue} 
  onChange={changePresupuestoObraInput} 
  name="presupuestoObra" 
/>

方案2：直接在输入框层处理显示逻辑 #

如果不想新增状态，可以直接在输入框的value属性上做判断，空输入时显示空白，非空时显示数值：

<input 
  type="number" 
  readOnly={readOnlyBoolean} 
  value={editInputPresupuestoObra === 0 && e.target.value === '' ? '' : editInputPresupuestoObra}
  onChange={(e) => {
    const val = e.target.value;
    const num = val === '' ? 0 : parseFloat(val);
    setEditInputPresupuestoObra(num);
    if (obraInfo) {
      setObraInfo({...obraInfo, presupuesto: num});
    }
  }} 
  name="presupuestoObra" 
/>

方案3：状态存空字符串，业务逻辑统一转数值 #

允许状态存储空字符串，在需要使用数值的地方（比如提交、计算）再统一转为0，这样输入框清空时显示空白，输入时无前置0：

const changePresupuestoObraInput = (e: ChangeEvent<HTMLInputElement>) => {
  const inputVal = e.target.value;
  // 空输入存空字符串，非空转数字
  setEditInputPresupuestoObra(inputVal === '' ? '' : parseFloat(inputVal));

  // 更新 obraInfo 时统一处理数值
  if (obraInfo) {
    const presupuesto = inputVal === '' ? 0 : parseFloat(inputVal);
    setObraInfo({...obraInfo, presupuesto});
  }
};

// 输入框绑定
<input 
  type="number" 
  readOnly={readOnlyBoolean} 
  value={editInputPresupuestoObra} 
  onChange={changePresupuestoObraInput} 
  name="presupuestoObra" 
/>

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