<p>Utility component that locks focus inside the component.</p>


If <code>true</code>, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any focus trap children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers.

If <code>true</code>, the focus trap will not prevent focus from leaving the focus trap while open.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers.

If <code>true</code>, the focus trap will not restore focus to previously focused element once focus trap is hidden or unmounted.

Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the &quot;tabbable&quot; npm dependency.

This prop extends the <code>open</code> prop. It allows to toggle the open state without having to wait for a rerender when changing the <code>open</code> prop. This prop should be memoized. It can be used to support multiple focus trap mounted at the same time.

名称	类型	默认值	描述
open*	bool	-	如果为 `true`，则焦点被锁定。
children	element	-	单个子内容元素。此元素需要能够容纳 ref。
disableAutoFocus	bool	false	如果为 `true`，焦点陷阱在打开时不会自动将焦点转移到自身，并在关闭时将其替换为最后聚焦的元素。这对于任何具有 `disableAutoFocus` prop 的焦点陷阱子组件也同样适用。通常不应将其设置为 `true`，因为它会降低焦点陷阱对辅助技术（如屏幕阅读器）的可访问性。
disableEnforceFocus	bool	false	如果为 `true`，焦点陷阱在打开时不会阻止焦点离开焦点陷阱。通常不应将其设置为 `true`，因为它会降低焦点陷阱对辅助技术（如屏幕阅读器）的可访问性。
disableRestoreFocus	bool	false	如果为 `true`，焦点陷阱在隐藏或卸载后不会将焦点恢复到先前聚焦的元素。
getTabbable	func	-	返回根元素内已排序的可 Tab 节点数组（即按照 Tab 顺序）。例如，您可以提供 "tabbable" npm 依赖项。签名：`function(root: HTMLElement) => void`
isEnabled	func	function defaultIsEnabled(): boolean { return true; }	此 prop 扩展了 `open` prop。它允许在更改 `open` prop 时无需等待重新渲染即可切换打开状态。此 prop 应该被记忆化。它可以用于支持同时挂载的多个焦点陷阱。

焦点陷阱

FocusTrap API

导入

Props