單擊“滾動到頂部”按鈕后將焦點設置在元素上

Question

我有一個 ScrollToTop 組件，它在單擊按鈕后基本上滾動到頂部，但是我注意到焦點停留在按鈕上。 我將如何 go 將焦點設置到另一個組件中的元素？

這是我的 ScrollToTop 組件：

const ScrollToTop = () => {
    const [showScrollButton, setShowScrollButton] = useState<boolean>(false)

    const checkScrollToTop = () => {
        if (!showScrollButton && window.pageYOffset > 400) {
            setShowScrollButton(true)
        } else if (showScrollButton && window.pageYOffset <= 400) {
            setShowScrollButton(false)
        }
    };

    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    window.addEventListener('scroll', checkScrollToTop)

    return (
        <button
            type='button'
            onClick={scrollToTop}
        >
        </button>
    );
}

export default ScrollToTop;

然后我只是將它導入到頁面中，但是我想要設置焦點的元素在 List 組件中：

return (
  <div>
    <List collections={collections} />
  </div>
  <ScrollToTop />
);

Answer 1

document.getElementById("yourElementID").focus();

上面的代碼集中了 ID yourElementID的元素。

滾動后嘗試添加該行。

改變

 const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
 };

至

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    document.getElementById("yourElementID").focus();
};

Answer 2

在您的情況下， ScrollToTop 組件會更改 List 組件的行為。 因此，我會將對此的處理提取到父組件中，該組件正在渲染兩個組件。

我創建了一個小演示（帶有一些不相關的 typescript 錯誤），它更清楚地說明了我的意思： https://codesandbox.io/s/scrolltotopdemo-dh3q3

基本上：

1. 在“父組件”中制作一個state，控制List組件的焦點
2. 使用 react ref 將焦點設置到輸入元素https://reactjs.org/docs/hooks-reference.html#useref
3. 單擊按鈕時，在 ScrollToTop 組件中調用 function。