本文详解 Formik 表单中 在使用小键盘点号（.）输入小数时值意外清空的成因与解决方案，核心在于 parseFloat() 对本地化小数分隔符的兼容性缺陷及正确处理方式。

本文详解 formik 表单中 `` 在使用小键盘点号（`.`）输入小数时值意外清空的成因与解决方案，核心在于 `parsefloat()` 对本地化小数分隔符的兼容性缺陷及正确处理方式。

该问题表面看是“输入后值消失”，实则源于浏览器行为与 JavaScript 解析逻辑的双重作用：

• 浏览器原生 在不同地区会根据系统/浏览器语言设置，将小键盘上的 . 或 , 视为合法的小数分隔符（例如：德语区默认用 , 作小数点，. 作千分位；英语区则相反）；
• 但 parseFloat() 仅识别英文句点 . 为小数点，且完全不支持逗号 , 作为小数分隔符——一旦输入内容含本地化逗号（如用户输入 "123,45"），parseFloat("123,45") 立即返回 123（截断后续），更严重的是：若输入中途为 "123,"，parseFloat("123,") === 123，而 "123.,45" 则解析为 123，导致表单状态异常甚至视为空值触发重置。

然而，你遇到的“点号（.）导致值消失”，恰恰说明当前环境（如德语/法语系统）下浏览器将小键盘 . 解释为千分位符号而非小数点，于是输入 "123.45" 实际被当作 "123,45" 的等效格式（即 123 千 + 45），此时 parseFloat("123.45") 在非英语环境下可能因解析失败返回 NaN，进而使 setFieldValue 写入无效值，触发 Formik 字段重置或 UI 清空。

✅ 正确解法：不依赖 parseFloat 直接解析原始输入，而应结合输入校验与标准化转换

推荐采用以下鲁棒性处理方案：

{ const rawValue = evt.target.value.trim(); // 允许空值、纯数字、带单个小数点或逗号（兼容多区域） if (rawValue === '' || /^-?\d*[,.]?\d*$/.test(rawValue)) { let normalized = rawValue; // 统一替换本地化小数分隔符为英文句点 // 支持：'123,45' → '123.45'（德语区）；'123.45' 保持不变（英语区） if (rawValue.includes(',')) { // 仅当逗号位于最后一位数字前且仅出现一次时，视为小数点（防误杀 "1,000"） const lastCommaIndex = rawValue.lastIndexOf(','); if (lastCommaIndex > 0 && lastCommaIndex === rawValue.indexOf(',')) { const parts = rawValue.split(','); if (parts.length === 2 && /^\d+$/.test(parts[1])) { normalized = parts[0] + '.' + parts[1]; } } } // 移除所有其他非数字字符（保留负号和唯一小数点） const cleaned = normalized .replace(/[^-\d.]/g, '') // 删掉逗号、空格、字母等 .replace(/\.+/g, '.') // 合并多个点为一个 .replace(/^\.+/, '') // 点开头则删掉 .replace(/\.$/, ''); // 点结尾则删掉 // 安全解析：空字符串 → undefined；否则 parseFloat 并验证 const num = cleaned === '' ? undefined : parseFloat(cleaned); formikProps.setFieldValue('formInvoice.amount', isNaN(num) ? undefined : num); } }} type="number" step="0.01" name="amount" />

? 关键注意事项：

• ❌ 避免直接对 evt.target.value 调用 parseFloat() —— 它无法感知用户区域习惯，极易因格式不符返回 NaN；
• ✅ 始终先做输入清洗（正则过滤、分隔符归一化），再解析；
• ✅ 使用 undefined 而非 NaN 作为空/无效值，确保 Formik 正确识别字段未填写状态；
• ✅ 若需更高精度（如金额计算），建议改用 string 存储原始输入，或借助 BigInt / decimal.js 库避免浮点误差；
• ? 补充：可配合 onBlur 进行最终格式化（如补零显示 "123.40"），提升用户体验。

综上，该问题本质是国际化输入与 JavaScript 数值解析能力之间的鸿沟。通过主动标准化输入格式、分层校验与安全解析，即可彻底规避小键盘分隔符引发的值丢失，构建真正健壮的金融/财务类表单体验。