本文解析了在 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 直接解析原始输入，应先标准化字符串，再做健壮转换：
<Form.Control
value={formikProps.values.amount ?? ""}
onChange={(evt) => {
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"，确保无崩溃、无意外清空。
通过以上改造，你将获得一个真正鲁棒、跨区域兼容、用户体验流畅的数字输入控件，彻底告别“按一下小数点就消失”的尴尬问题。
