跳转到内容

Trap Focus 陷阱焦点

在 DOM 节点内捕获焦点。

陷阱焦点是一个为其子节点管理焦点的组件。 This is useful when implementing overlays such as modal dialogs, which should not allow the focus to escape while open.

When open={true} the trap is enabled, and pressing Tab or Shift+Tab will rotate focus within the inner focusable elements of the component.

该组件处于试验阶段,是不稳定的。

示例


禁用强制对焦

在焦点陷阱内的点击会正常进行,但在焦点陷阱外的点击会被阻止。

你可以使用 disableEnforceFocus 属性来禁用此行为。


延迟激活

默认情况下,组件在打开后就会立刻将其焦点移到其子节点:open={true}

你可以使用 disableAutoFocus 属性来禁止这种行为,并使其变成惰性加载。 当禁用自动聚焦时,就像下面的演示一样,组件只有在聚焦后才会捕捉焦点。


Portal

下面的演示使用 Portal 组件将陷阱焦点子集渲染到当前 DOM 层次结构之外的新“子树(subtree)”中,这样它们就不再是焦点循环的一部分。