本文解析了在 Formik 表单中使用 时，用户通过数字键盘输入英文小数点（.）导致输入值瞬间消失的根本原因，并提供兼容性更强、符合多区域习惯的数值解析方案。

本文解析了在 formik 表单中使用 `` 时，用户通过数字键盘输入英文小数点（`.`）导致输入值瞬间消失的根本原因，并提供兼容性更强、符合多区域习惯的数值解析方案。

在使用 配合 Formik 处理金额等浮点型数据时，一个常见却易被忽视的问题是：当用户在数字键盘上按下小数点键（.）时，输入框内容突然清空或变为 NaN，而改用逗号（,）反而能正常工作。这并非浏览器 Bug，而是由 parseFloat() 的严格解析规则与 的本地化行为共同导致的。

根本原因分析

• 在不同地区浏览器中会根据系统 locale 自动适配小数分隔符：例如德语/法语环境默认接受 , 为小数点，. 为千位分隔符；而英语环境则相反。
• 当用户在非英语 locale 下按数字键盘的 . 键时，浏览器可能将其解释为千位分隔符（如 123.456,78），此时输入值字符串形如 "123.456," —— 含非法字符（尾随逗号或中间点号）。
• parseFloat("123.456,") 会截断到第一个非法字符前，返回 123.456；但 parseFloat("123,456.78") 则因 , 不被识别，直接返回 123，更严重的是：若输入仅为 "." 或 ", " 等不完整状态，parseFloat 返回 NaN，而 Formik 将 NaN 写入 state 后，value={formikProps.values.amount} 会渲染为 value="NaN"，触发浏览器对 type="number" 的校验失败，最终清空显示。

✅ 推荐解决方案：安全解析 + 输入防抖校验

避免依赖 parseFloat 直接解析原始输入，应先标准化字符串，再做健壮转换：

{ const rawValue = evt.target.value.trim(); // 允许空值、纯小数点、负号等中间态，暂不强制转换 if (rawValue === "" || rawValue === "-" || rawValue === ".") { formikProps.setFieldValue("formInvoice.amount", ""); return; } // 替换所有非数字字符（除首个'-'和最后一个'.'外），支持国际化小数符号 // 先统一替换逗号为点（适配欧洲习惯），再移除非数字/点/负号字符 let normalized = rawValue.replace(/,/g, "."); normalized = normalized.replace(/[^0-9.-]/g, ""); // 移除字母、空格、千分位等 // 保留最多一个负号（开头）和一个小数点（且不在末尾） const parts = normalized.split("."); if (parts.length > 2) { normalized = parts[0] + "." + parts.slice(1).join(""); } if (normalized.endsWith(".")) { normalized = normalized.slice(0, -1); } // 安全转数字：空串→undefined，否则尝试 parseFloat const num = normalized === "" ? undefined : parseFloat(normalized); // 可选：限制精度（如金额保留2位小数） const finalValue = isNaN(num) ? "" : Number(num.toFixed(2)); formikProps.setFieldValue("formInvoice.amount", finalValue); }} type="text" // ⚠️ 关键：改用 type="text" 避免浏览器自动拦截非法 number 字符 step="0.01" name="amount" />

? 关键改进点：

• 将 type="number" 改为 type="text"：彻底规避浏览器对 number 类型的严格格式拦截，把控制权交还给 JS；
• 输入标准化：统一处理 , 和 .，过滤非法字符，支持用户自然输入（如 1.234,56 → 1234.56）；
• 中间态宽容：允许 "-"、"." 等未完成输入，避免闪烁或清空；
• 显式精度控制：toFixed(2) 保证金额类字段符合业务要求。

注意事项与最佳实践

• ❌ 不要对 type="number" 的 onChange 值直接 parseFloat() —— 它无法应对多语言输入的中间态；
• ✅ 使用 type="text" + 自定义解析 是目前最稳定、可维护性最强的方式；
• ? 若需服务全球用户，建议配合 Intl.NumberFormat 进行格式化显示（如 1234.56 → "1.234,56"），但输入解析仍应以标准化数字字符串为准；
• ? 测试覆盖场景："123", "123.", "123,45", "-.5", "1.234.567", "abc"，确保无崩溃、无意外清空。

通过以上改造，你将获得一个真正鲁棒、跨区域兼容、用户体验流畅的数字输入控件，彻底告别“按一下小数点就消失”的尴尬问题。