ref.current.focus() is null

Question

我有一个图标和一个输入字段。当点击图标时，我需要专注于输入。

代码：

const inputRef = useRef(null)

图标：

<ChatIcon className="btn" onClick={inputRef.current.focus()} />

输入：

<input
placeholder="add a comment..."
type="text"
value={comment}
ref={inputRef}
onChange={(e) => setComment(e.target.value)}
/>

错误：

类型错误：无法读取null的属性(读取"焦点"(

Answer 1

如果在函数点击之前调用它，则需要像一样添加它

<ChatIcon className="btn" onClick={inputRef.current.focus} />

或者如果你想更安全

<ChatIcon className="btn" onClick={() => inputRef.current && inputRef.current.focus()} />

Answer 2

onClick调用您传入的参数的返回值