在调用 useRef 当前对象的焦点时无法读取未定义的属性（读取“焦点”）

Posted 2023-03-16

【中文标题】在调用 useRef 当前对象的焦点时无法读取未定义的属性（读取“焦点”）

【英文标题】：Cannot read properties of undefined (reading 'focus') on calling focus on useRef current object

【发布时间】：2022-01-14 22:47:11

【问题描述】：

这里我必须调用 useRef 并在 Ref 对象上调用 focus 方法。下面是 Input.tsx 组件。

import React,  useRef, useState  from "react";

const Input = (props: any) => 

const [text, setText] = useState<string>('');

const inputRef = useRef<any>();

const onChangeHandler = (e) => 
  setText(e.target.value)
;

const submitHandler = (event: React.FormEvent) => 
event.preventDefault();
if (!text) 
    inputRef.current.focus();
  

;  

return (
    <div>
<form onSubmit=submitHandler>
  <label htmlFor="label">label</label>
  <input
    ref=inputRef
    value=text
    type="text"
    id="email"
    onChange=onChangeHandler
    />
<button type="submit">Submit</button>
</form>
</div>


);

;

export default Input;

如果我没有将 useRef 类型定义为“任何”，则会出现编译错误。在将其定义为“任何”时，我遇到了运行时错误，即无法读取未定义的属性（读取“焦点”）。我认为我没有在 useRef 上初始化任何值，这就是我收到此错误的原因。但我也知道我不能分配字符串、数字或布尔值并在那里调用 focus()。我该如何解决这个问题。顺便说一句，我正在使用打字稿。

【问题讨论】：

何时调用activate？

@SurjeetBhadauriya soz 忘了提到我正在使用 useImperativeHandle 钩子，因此 ref 可以在其他组件中使用。所以是的，当调用激活时。以这种方式编辑代码

请提供可重现的示例。 inputRef 是否与 <input /> 一起使用？

This 回答可能会有所帮助。请记住inputRef.current 是InputHTMLElement | undefined，这意味着您的代码可能会导致运行时错误，因为current 可能是undefined。在调用 focus 之前，您需要确保 typescript 具有正确的引用

我敢打赌你应该使用const inputRef = useRef<HTMLInputElement>(null) 而不是const inputRef = useRef<any>()

【参考方案1】：

我找到了自己问题的答案。文本输入字段的 useRef.current 类型通常是 不能未定义。因此代码应该是这样的。

import React,  useRef, useState  from "react";

const Input = (props: any) => 

const [text, setText] = useState<string>('');

const inputRef = useRef<HTMLInputElement>(null); //made a change here

const onChangeHandler = (e) => 
  setText(e.target.value)
;

const submitHandler = (event: React.FormEvent) => 
event.preventDefault();
if (!text) 
    inputRef.current!.focus(); //made a change here
  

;  

return (
    <div>
<form onSubmit=submitHandler>
  <label htmlFor="label">label</label>
  <input
    ref=inputRef
    value=text
    type="text"
    id="email"
    onChange=onChangeHandler
    />
<button type="submit">Submit</button>
</form>
</div>


);

;

export default Input;

感谢我的问题下方的一位 cmets。