本文详解 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" + 自定义数值清洗逻辑
<Form.Control
type="text" // 关键：改为 text，避免浏览器自动清空
value={formikProps.values.amount ?? ''}
onChange={(evt) => {
const rawValue = evt.target.value;
// 允许输入：数字、小数点（仅一个）、可选负号，忽略其他字符
const cleaned = rawValue.replace(/[^0-9.-]/g, '') // 移除非数字、非点、非负号
.replace(/(?<!^)-/g, '') // 确保负号仅在开头
.replace(/(\..*)\./g, '$1') // 限制仅一个点
.replace(/^(-?)\./, '$10.'); // 点开头补 0，如 ".5" → "0.5"
// 安全解析：空值、纯符号返回 undefined 或 0，避免 NaN 写入
const parsed = cleaned === '' || cleaned === '-' || cleaned === '-.'
? undefined
: parseFloat(cleaned);
formikProps.setFieldValue('formInvoice.amount', parsed);
}}
placeholder="0.00"
/>? 关键注意事项：
- ✅ 永远不要依赖 type="number" 处理用户输入：其 locale 敏感性与不可控的清空行为使其不适合金融/金额类受控组件；
- ✅ 前端显示值应与状态一致：value 属性需绑定 formikProps.values.amount（建议设为 number | undefined），空值显示为空字符串，避免 value={undefined} 导致 React 警告；
- ✅ 服务端必须二次校验：前端清洗仅为体验优化，金额字段务必在 API 层做严格数字范围、精度（如 toFixed(2)）和类型验证；
- ⚠️ 避免 replace(/,/g, '') 的简单方案：该方案针对的是千分位逗号，但本问题根源是 locale 不匹配导致的浏览器拦截，盲目移除逗号无法解决小数点清空问题，且可能破坏正确输入（如德语用户本就该输 123,45）。
总结而言，这不是 parseFloat 的缺陷，而是混合使用原生表单约束与受控组件时的设计陷阱。采用 type="text" 主导输入 + 前端精细化清洗 + 服务端兜底验证，才是构建健壮金额输入体验的工业级实践。
