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

Question

这里我必须调用 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 类型定义为 'any'，我将遇到编译错误。在定义它的地方 'any' 我收到无法读取未定义属性的运行时错误（读取 'focus'）。我想我没有在 useRef 上初始化任何值，这就是我收到此错误的原因。但我也知道我不能分配字符串、数字或布尔值并在那里调用 focus() 。我该如何解决这个问题。顺便说一句，我正在使用打字稿。

Answer 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;

感谢我的问题下方的评论之一。

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

Cannot read properties of undefined (reading 'focus') on calling focus on useRef current object

focus

typeerror

typescript

reactjs

use-ref