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

Answer 1

我找到了自己问题的答案。文本输入字段的

useRef.current

类型通常是

<HTMLInputElement | null>

，但不能是

undefined

。因此，代码应该是这样的。

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;

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