React中TextField输入浮点数时小数点或逗号被删除问题

输入小数点/逗号后立即被自动删除，是以下两个逻辑共同导致的：

• 设置type="number"的原生输入框，在输入不完整浮点数（例如250.这类带尾随小数点、还未输入后续小数位的内容）时，会判定输入值为非法数值，直接返回空字符串
• 状态中存储的power字段为整数类型，onChange触发时直接将输入值同步回状态，输入过程中的临时字符（小数点、逗号）会在状态更新时被自动抹除，刚输入的符号直接被状态回写覆盖。

1. 调整输入过程中的值处理逻辑 #

用户输入过程中不要强制将输入值转为Number类型，先保留原始字符串输入，等用户输入完成（输入框失焦）后再做数值转换和合法性校验，避免打断正常输入流程。

2. 给数字输入框添加步长属性支持浮点数 #

给TextField的inputProps添加step参数，放开小数输入权限，原生number输入默认步长为1，仅支持整数输入。

3. 补充失焦校验逻辑 #

输入框失焦时再将字符串转为浮点数，同时处理非法输入的回退逻辑。

修正后的代码实现 #

更新函数与失焦处理逻辑：

// 输入过程中同步原始输入值，不做强制类型转换
const updateChargingCurveTableRowPower = (rowIndex, inputValue) => {
  setChargingCurveTableData(prev => prev.map((item, idx) => {
    if (idx !== rowIndex) return item;
    return { ...item, power: inputValue }
  }))
}

// 输入完成（失焦）时做数值转换与校验
const handlePowerBlur = (rowIndex) => {
  setChargingCurveTableData(prev => prev.map((item, idx) => {
    if (idx !== rowIndex) return item;
    const numValue = parseFloat(item.power);
    // 非法值回退为0，可根据业务需求替换为其他默认值
    return { ...item, power: isNaN(numValue) ? 0 : numValue }
  }))
}

修正后的TextField组件：

<TableCell className={classes.tableCell}>
  <TextField
    inputProps={{
      'aria-label': `chargingCurveTable Row ${i}, power`,
      style: { textAlign: 'center' },
      step: "0.1" // 按需调整小数精度，0.1支持1位小数，0.01支持2位小数
    }}
    type='number'
    value={row.power}
    onChange={(event) => updateChargingCurveTableRowPower(
      i,
      event.target.value,
    )}
    onBlur={() => handlePowerBlur(i)}
  />
</TableCell>

可选优化：如果不需要原生数字输入框的上下步进按钮，可以直接将type="number"改为type="text"，在onChange中通过正则/[^0-9.]/g过滤非法输入，能彻底避免原生number输入框的中间态输入丢失问题，兼容性更好。

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