封装MUI TextField组件后出现输入功能异常问题

问题根源 #

1. 组件重复创建导致失焦：如果SimpleTextField定义在父组件内部，每次父组件因状态变化（比如Formik值更新）重渲染时，这个子组件会被重新创建。React会判定这是全新的组件，卸载旧组件并挂载新组件，直接导致输入框失焦。
2. 硬编码依赖外部变量：当前封装的组件直接引用外部作用域的formik、vacancyStatus等变量，不仅无法复用，还会触发不必要的重渲染，加剧性能问题。

修复方案 #

1. 正确封装可复用组件 #

将组件移到父组件外部（或单独文件），通过props传入所有动态参数，让组件只依赖传入的属性：

// 定义在父组件外部或单独的组件文件中
const SimpleTextField = ({
  disabled,
  label,
  name,
  datacy,
  formik,
  variant = "outlined",
  fullWidth = true
}) => {
  return (
    <TextField
      disabled={disabled}
      label={label}
      variant={variant}
      name={name}
      datacy={datacy}
      fullWidth={fullWidth}
      value={formik.values[name]}
      onChange={formik.handleChange}
      error={formik.touched[name] && Boolean(formik.errors[name])}
      helperText={formik.touched[name] && formik.errors[name]}
    />
  )
}

2. 父组件中调用封装后的组件 #

// 在父组件内部使用
<SimpleTextField
  disabled={vacancyStatus === "Expired"}
  label="Insurance 2"
  name="insurance"
  datacy="insurance"
  formik={formik}
/>

额外注意事项 #

• 确保formik实例稳定：在父组件顶层通过useFormik钩子定义，不要在渲染逻辑内重新创建。
• 若因特殊需求必须在父组件内部定义子组件，可通过React.memo包裹组件，减少不必要的重渲染，但优先推荐外部定义+props传值的方案。

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