Material UI自定义Styled TextField触发onChange时丢失焦点求助

问题根源 #

你遇到的焦点丢失问题，核心原因是在CustomField组件内部定义了StyledField。每次CustomField重新渲染（比如父组件触发onChange更新状态时），都会重新创建一个全新的StyledField组件类型。React会判定这是完全不同的组件，会卸载旧组件再挂载新的，输入框自然就失去了焦点。你之前尝试加key没用，因为key是用来区分同一类型组件的不同实例，而这里是组件类型本身每次都在变，key解决不了这个问题。

修复方案 #

把styled(TextField)的定义移到CustomField组件外部，让它只被创建一次，不会随组件渲染重复生成：

import { TextField } from '@mui/material';
import styled from '@mui/material/styles/styled';

// 将styled定义移到组件外部，确保组件类型稳定
const StyledField = styled(TextField)(({ theme }) => ({
  width: "70%",
  margin: theme.spacing(1),
})); 

export default function CustomField(props) {
  const { name, label, value, onChange, ...others } = props

  return (
    <StyledField
      variant="outlined"
      label={label}
      name={name}
      onChange={onChange}
      value={value}
      {...others}
    />
  );
}

额外优化（非焦点问题，但避免后续bug） #

你的useForm里返回的是setvalues，但表单页面调用时用的是setValues（大小写不一致），建议统一命名：

修改useForm.js的返回值：

return {
  values,
  setValues: setvalues, // 对齐调用处的命名
  handleChange,
}

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