(MUI Textfield) Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

Question

我目前正在 Material Ui 文本字段上使用 useRef 挂钩，但我一直收到错误 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')，我不知道如何解决。我的代码如下所示：

const LoginTextField = styled(TextField)({
  '& .MuiInput-underline:after': {
    borderBottomColor: 'white',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: '#263238',
    },
    input: { color: 'white' },
    backgroundColor: '#263238'
  }
});

export default function test() {

  const userRef = useRef();
  const [loginEmail, setLoginEmail] = useState('');

  useEffect(() => {
    userRef.current.focus();
  }, [])

<LoginTextField label='Email' variant='outlined' onChange={(e) => setLoginEmail(e.target.value)} 
 inputRef={userRef} InputLabelProps={{ style: { color: 'white' } }} />
}

有人知道我的代码有什么问题吗？非常感谢。

Answer 1

嘿，我认为如果您先初始化 userRef() 上的值会更好。

因此，将 useRef 视为 useState，状态保存在下一次渲染中，因此我认为您还应该决定要使用 useRef 做什么，例如更新电子邮件或密码？

例如：useRef('') 或 null 或任何您想成为您案例中的默认/初始值/状态的内容。

那么也许你可以创建一个函数


const myFunction = () => {
// update the state or what you actually want to implement
}

然后我会运行 myFunction 在 useEffect 里面。

希望能有所帮助。

还要检查这个：https://dmitripavlutin.com/react-useref-guide/

(MUI Textfield) Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

(MUI Textfield) Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

javascript

dom

reactjs

material-ui