检查元素是否集中在 React 中

作者

检查一个元素是否在 React 中聚焦

Check if an Element is focused in React

要检查元素是否在 React 中获得焦点：

  1. ref在元素上设置道具。
  2. 元素呈现后，检查元素是否是文档中的活动元素。
  3. 如果是，则该元素被聚焦。
应用程序.js
import {useEffect, useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  // 👇️ check if element is focused on mount
  useEffect(() => {
    if (document.activeElement === ref.current) {
      console.log('element has focus');
    } else {
      console.log('element does NOT have focus');
    }
  }, []);

  return (
    <div>
      <input ref={ref} autoFocus type="text" id="message" name="message" />
    </div>
  );
}

代码片段显示了如何检查元素是否获得焦点。

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的input元素。 ref

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

我们使用useEffect钩子是因为我们想确保ref已经在元素上设置并且元素已经被渲染。

document.activeElement
属性返回当前具有焦点的元素。

如果没有焦点元素，该document.activeElement 属性将body在大多数浏览器中返回该元素，但它也可能返回，null具体取决于浏览器的实现。

我们只需检查是否document.activeElement等于ref.current，如果表达式返回true，则该元素具有焦点。

–

发表评论