使用Formik的number输入框按小键盘小数点时值消失问题求助

你猜的没错，问题确实出在parseFloat上。当你输入单独的小数点（比如先打.），parseFloat(".")会返回NaN，Formik把NaN赋值给字段后，输入框的value变成NaN，自然就显示空了。用逗号时没问题，大概率是因为你的浏览器区域设置里逗号是小数分隔符，这时候输入逗号的话，浏览器的number输入框会拦截单独的逗号输入，不会让它触发onChange，或者返回的value不是纯逗号，所以parseFloat不会返回NaN。

给你几个实用的解决办法：

1. 用Formik自带的handleChange（最省心） #

直接用Formik提供的handleChange代替手动处理，它会自动适配number类型输入的场景，能正确保留小数点输入的中间状态：

<Form.Control
  value={formikProps.values.formInvoice.amount}
  onChange={formikProps.handleChange}
  type="number"
  step=".01"
  name="formInvoice.amount"                           
/>

注意要把name改成formInvoice.amount，和你要设置的字段路径一致，同时value也要对应取formikProps.values.formInvoice.amount。

2. 手动处理输入，避免NaN #

如果一定要自定义onChange逻辑，可以在parseFloat前判断输入值，避免转换出NaN：

onChange={(evt: any) => {
  const inputValue = evt.target.value;
  // 单独的小数点直接保留字符串，否则尝试转换
  const finalValue = inputValue === '.' 
    ? inputValue 
    : isNaN(parseFloat(inputValue)) 
      ? inputValue 
      : parseFloat(inputValue);
  formikProps.setFieldValue(`formInvoice.amount`, finalValue);
}}

这样输入.或者12.这种中间状态时，输入框会保留内容，不会清空。

3. 加输入格式校验（更严谨） #

如果想限制只能输入合法的数字格式（整数、小数、开头的小数点比如.5），可以加正则判断：

onChange={(evt: any) => {
  const value = evt.target.value;
  // 允许空、纯小数点、整数、带小数的数字
  const isValidFormat = value === '' || value === '.' || /^\d+\.?\d*$/.test(value);
  if (isValidFormat) {
    const finalValue = value === '' 
      ? null 
      : value === '.' 
        ? value 
        : parseFloat(value);
    formikProps.setFieldValue(`formInvoice.amount`, finalValue);
  }
}}

这个方案能过滤掉乱七八糟的输入，只保留合法的数字格式。

内容的提问来源于stack exchange，提问作者Greg-A