当在数字输入框中通过数字键盘输入小数点（.）时，Formik 表单的 value 突然清空，根本原因在于 parseFloat() 对部分区域设置（如德语、法语等）下浏览器自动将小数点显示为逗号（,）但实际输入事件仍触发英文符号，导致解析失败或返回 NaN，进而引发受控组件值异常。
当在数字输入框中通过数字键盘输入小数点（.）时，formik 表单的 `value` 突然清空，根本原因在于 `parsefloat()` 对部分区域设置（如德语、法语等）下浏览器自动将小数点显示为逗号（`,`）但实际输入事件仍触发英文符号，导致解析失败或返回 `nan`，进而引发受控组件值异常。
该问题并非 parseFloat “不支持逗号”，而是其行为与浏览器本地化输入逻辑存在冲突：在许多欧洲地区（如德国、西班牙），系统默认使用逗号（,）作为小数分隔符，而句点（.）被用作千位分隔符。当用户在数字键盘按下小数点键时，某些浏览器（尤其是 Chromium 内核）会根据 lang 或 accept-language 设置，将该按键映射为本地化的小数符号（即 ,），但 <input type="number"> 的 evt.target.value 却可能在渲染/解析阶段因格式不匹配而短暂置空，或在 parseFloat() 处理含混合符号（如 "123,45.67"）的字符串时返回 NaN —— 此时 Formik 将 NaN 写入状态，而 NaN 在 React 受控组件中会被序列化为 "NaN" 字符串，再触发重渲染时因类型不一致导致输入框视觉清空。
✅ 正确解决方案是绕过 parseFloat 的本地化脆弱性，改用更鲁棒的数值解析策略：
-
优先使用原生 input[type="number"] 的 valueAsNumber 属性（推荐）
它由浏览器原生解析，自动适配当前 locale，且对合法输入返回 number，非法输入返回 NaN（可安全校验）：
<Form.Control
value={formikProps.values.amount ?? ''}
onChange={(evt) => {
const num = evt.target.valueAsNumber;
// 仅当输入有效数字时更新，避免 NaN / '' 导致清空
if (!isNaN(num) && isFinite(num)) {
formikProps.setFieldValue('formInvoice.amount', num);
}
}}
type="number"
step="0.01"
name="amount"
/>-
若需兼容旧浏览器或自定义格式（如允许逗号输入），则预处理输入值：
- 移除所有非数字字符（除首个 - 和唯一的小数点/逗号外）；
- 统一将本地化小数符（,）替换为英文小数点（.）；
- 再用 parseFloat 解析：
onChange={(evt) => {
let raw = evt.target.value.trim();
// 允许负号 + 数字 + 最多一个逗号或句点（视为小数点）
const cleaned = raw
.replace(/[^-\d,.\s]/g, '') // 删除非法字符
.replace(/(\d)[,\.](\d)/g, '$1.$2') // 将“数字+逗号/点+数字”标准化为点
.replace(/[,\.]/, '.') // 仅保留第一个小数点，其余逗号/点转为空
.replace(/([\-]?\d*)\.(\d*)\.?(\d*)/, '$1.$2$3'); // 防止多个点
const num = parseFloat(cleaned);
if (!isNaN(num) && isFinite(num)) {
formikProps.setFieldValue('formInvoice.amount', num);
}
}}⚠️ 注意事项：
- 切勿直接将 evt.target.value 传给 parseFloat 而不做校验——空字符串、"-"、","、"123,456" 均会导致 NaN；
- type="number" 在移动端可能禁用长按粘贴，如需支持粘贴，应额外监听 onPaste 并做同样清洗；
- Formik 的 setFieldValue 是异步的，若需实时校验，建议配合 yup schema 或自定义 validate 函数；
- 在国际化项目中，推荐搭配 Intl.NumberFormat 进行格式化显示（非输入），输入层保持纯数字逻辑。
总结：该问题本质是前端输入控件、浏览器 locale 行为与 JavaScript 类型转换三者间的隐式耦合。采用 valueAsNumber 是最简洁可靠的解法；若需更强控制力，则应主动清洗输入而非依赖 parseFloat 的宽松解析规则。
