本文详解 Formik 表单中 在使用数字键盘输入小数点时值消失的根本原因，并提供兼容性更强的数值解析方案，避免因 parseFloat 对区域化格式（如千分位逗号）处理不当导致的输入中断。
本文详解 formik 表单中 `` 在使用数字键盘输入小数点时值消失的根本原因，并提供兼容性更强的数值解析方案，避免因 `parsefloat` 对区域化格式（如千分位逗号）处理不当导致的输入中断。
在使用 配合 Formik 构建金额输入控件时，一个常见却易被忽视的问题是：当用户通过数字键盘按下小数点（.）后，输入框内容瞬间清空。而若改用逗号（,）作为小数分隔符，反而能正常工作——这看似反直觉，实则揭示了底层解析逻辑与浏览器区域设置、HTML 标准及 JavaScript 类型转换之间的深层冲突。
根本原因在于：
- HTML 的原生行为会根据用户的操作系统区域设置（Locale）决定小数分隔符（例如：美国/英国用 .，德国/法国用 ,）；
- 浏览器在 value 属性同步过程中，若输入内容不符合当前 locale 下的合法数字格式（如德语环境下输入 123.45），会将 input.value 重置为空字符串以维持表单一致性；
- 此时 evt.target.value 已为空，parseFloat('') 返回 NaN，再经 setFieldValue 写入后，Formik 状态与 UI 同步为无效值，造成“输入即消失”的假象；
- 而 parseFloat 本身确实不支持千分位逗号（如 '1,234.56'），但此问题在此场景中并非主因——真正触发清空的是浏览器对非法 type="number" 输入的拦截，而非 parseFloat 解析失败。
✅ 正确解法：绕过 type="number" 的严格校验，改用 type="text" + 自定义数值清洗逻辑
? 关键注意事项：
- ✅ 永远不要依赖 type="number" 处理用户输入：其 locale 敏感性与不可控的清空行为使其不适合金融/金额类受控组件；
- ✅ 前端显示值应与状态一致：value 属性需绑定 formikProps.values.amount（建议设为 number | undefined），空值显示为空字符串，避免 value={undefined} 导致 React 警告；
- ✅ 服务端必须二次校验：前端清洗仅为体验优化，金额字段务必在 API 层做严格数字范围、精度（如 toFixed(2)）和类型验证；
- ⚠️ 避免 replace(/,/g, '') 的简单方案：该方案针对的是千分位逗号，但本问题根源是 locale 不匹配导致的浏览器拦截，盲目移除逗号无法解决小数点清空问题，且可能破坏正确输入（如德语用户本就该输 123,45）。
总结而言，这不是 parseFloat 的缺陷，而是混合使用原生表单约束与受控组件时的设计陷阱。采用 type="text" 主导输入 + 前端精细化清洗 + 服务端兜底验证，才是构建健壮金额输入体验的工业级实践。
