---
title: "useActiveElement 用法与示例"
description: "React 跟踪 `document.activeElement` 的监听 hook。"
canonical: https://reactuse.com/zh-Hans/element/useactiveelement/
---

# useActiveElement

React 跟踪 `document.activeElement` 的监听 hook


`useActiveElement` 通过 [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement) 响应式地跟踪当前获得焦点的 DOM 元素。它返回获得焦点的元素（使用泛型参数类型化）或当没有元素获得焦点时返回 `null`。该 hook 自动监听文档上的 `focus` 和 `blur` 事件以保持值最新。

### 使用场景

- 在表单中高亮或样式化当前获得焦点的输入框
- 构建需要知道哪个元素获得焦点的辅助功能工具或焦点陷阱组件
- 在具有许多交互元素的复杂 UI 中调试焦点流

### 注意事项

- **SSR 安全**：在服务端渲染期间返回 `null`，因为 `document` 不可用。
- **泛型类型**：你可以通过类型参数缩小返回类型，例如 `useActiveElement<HTMLInputElement>()`，以获得对 `dataset` 等元素属性的类型化访问。
- 参见 `useFocus` 了解控制和跟踪特定元素的焦点状态。

## Usage

```tsx live noInline

function Demo() {
  const arr = [1, 2, 3, 4, 5, 6];

  const activeElement = useActiveElement<HTMLElement>();

  const key = useMemo(() => {
    return activeElement?.dataset?.id;
  }, [activeElement?.dataset?.id]);

  return (
    <div>
      <p>选择下面的输入框以查看变化</p>
      <div style={{ display: "flex", gap: 15, flexWrap: "wrap" }}>
        {arr.map((i) => {
          return <input key={i} placeholder={`${i}`} data-id={i} />;
        })}
      </div>
      <br />
      <div>
        当前活动元素:
        <span> {activeElement?.tagName}</span>
      </div>
       <div>
        当前活动元素的data-key:
        <span>{key}</span>
      </div>
    </div>
  );
};

render(<Demo/>)
```



%%API%%