在 <h1> 渲染时重置焦点

Question

当一个新的页面标题呈现时，我想重置该页面上的焦点，这样点击

<tab>

将导致浏览器转到可聚焦/可标记元素after这个主页面标题。

Answer 1

const PageTitle = ({title}) => {
  const titleHeaderRef = useRef(null as null | HTMLHeadingElement);
  useEffect(() => {
    if (titleHeaderRef.current !== null) {
      // First, make the element focus-able.
      titleHeaderRef.current.setAttribute('tabIndex', '-1');

      // Reset focus to this primary header.
      titleHeaderRef.current.focus();
      titleHeaderRef.current.blur();

      // Finally, make the element non-focus-able.
      titleHeaderRef.current.removeAttribute('tabIndex');

      // To see this behavior in action, wrap this dom calls in a 5 second setTimeout, and tab around the page before this timeout is hit.
    }
  }, []);

  return (
    <Typography ref={titleHeaderRef}>
      {title}
    </Typography>
  );
};