Formik绑定MUI数字TextField时输入失焦问题求助

问题根源 #

单次输入数字后输入框失焦，核心原因是输入触发Formik状态更新时，组件被重复卸载并重新挂载。常见触发场景包括：

• Form组件嵌套定义在父组件的渲染逻辑内，导致父组件每次渲染都生成新的Form组件实例
• Formik默认将数字输入转为字符串，与初始值的数字类型不匹配，触发不必要的额外渲染

修复方案 #

方案1：将Form组件提取为独立模块

如果你的Form组件是嵌套在其他组件内部定义的，把它抽离成独立组件，避免父组件渲染时重复创建Form实例：

// 单独定义Form组件
const NumberInputForm = () => {
  const formik = useFormik({
    initialValues: {
      newValue: Data.default
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TextField
        type="number"
        name="newValue"
        value={formik.values.newValue}
        onChange={formik.handleChange}
        min={Data.lowerBoundary}
        max={Data.upperBoundary}
        label={Data.name}
        variant="outlined"
      />
      <Button type="submit">提交</Button>
    </form>
  );
};

// 在父组件中直接调用
const ParentPage = () => {
  return <NumberInputForm />;
};

方案2：手动处理数字输入的类型转换

Formik的handleChange会默认把数字输入转为字符串，和初始值的数字类型冲突，引发额外渲染。可以用setFieldValue手动转换类型：

<TextField
  type="number"
  name="newValue"
  value={formik.values.newValue}
  onChange={(e) => {
    // 空输入时设为符合业务逻辑的默认值，此处用0示例
    const numValue = e.target.value ? Number(e.target.value) : 0;
    formik.setFieldValue("newValue", numValue);
  }}
  min={Data.lowerBoundary}
  max={Data.upperBoundary}
  label={Data.name}
  variant="outlined"
/>

方案3：添加稳定的key属性

如果输入框是动态渲染的（比如在循环内），给TextField设置固定的key，避免React重新创建DOM节点：

<TextField
  key="fixed-number-input-key"
  type="number"
  name="newValue"
  // 其他属性保持不变
/>

效果验证 #

应用任意一种方案后，输入框即可支持连续输入完整数字，不会再出现单次输入后失焦的问题。

内容的提问来源于stack exchange，提问作者Olivia Bates