javascript - 检测输入元素是否在 ReactJS 中聚焦

Question

如何检测如下输入元素当前是否聚焦在 ReactJS 渲染函数中？

<input type="text" style={searchBoxStyle} placeholder="Search"></input>   

Answer 1

您可以检查 document.activeElement 只要输入 Node 已安装并且有对其的引用:

const searchInput = React.useRef(null)

if (document.activeElement === searchInput.current) {
  // do something
}

return <input type="text" ref={searchInput} />

另一种方法是在输入字段中为 focus 和 blur 事件添加事件监听器:

const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)

return <input type="text" onFocus={onFocus} onBlur={onBlur} />

请注意，每次 Node 聚焦或模糊时，这都会调用重新渲染(但这正是您想要的，对吧？)