Skip to content

useFocusTrap

@astryxdesign/core v0.7.1 · useFocusTrap

参数 ​

名称类型默认值说明
optionsUseFocusTrapOptions{}焦点陷阱的配置对象。里面的字段都是可选的。
options.containerRef<HTMLElement | null>—要关住焦点的元素。模板里绑同一个模板引用。不传也行,hook 自己建一个,从返回值的 containerRef 取。
options.isActiveMaybeRefOrGetter<boolean>—陷阱当前是否生效。打开时装上监听并把焦点送进去,关闭时摘掉监听并把焦点还回去。isEnabled 是同一个开关的另一个名字,任一为真即生效。
options.isEnabledMaybeRefOrGetter<boolean>—和 isActive 是同一个开关,习惯哪个名字就用哪个。两个都传没意义。
options.onEscape() => void—容器里按下 Escape 时调用。陷阱不吞这个键:旁边的轻关闭处理照样收得到。
options.initialFocus() => HTMLElement | null—陷阱打开时先聚焦哪个元素。返回 null 就退回第一个可聚焦元素。

返回值 ​

名称类型说明
containerRefRef<HTMLElement | null>绑到要关住焦点的容器上的 ref。就是你传进来的 container,没传时是 hook 自己建的那个。
focusFirst() => void聚焦容器里的第一个可聚焦元素。
focusLast() => void聚焦容器里的最后一个可聚焦元素。
update() => void留给需要在子元素变化后重新测量的调用方。它什么都不做:可聚焦元素在每次按键时都会重新读。