单击'scroll to top'按钮后将焦点设置在元素上

Question

我有一个ScrollToTop组件，它本质上是在点击按钮后滚动到顶部，但我注意到焦点仍然在按钮上。如何将焦点设置为另一个组件中的某个元素？

这是我的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组件的行为。因此，我会将对此的处理提取到父组件中，父组件正在渲染这两个组件。

我创建了一个小演示(有一些不相关的打字错误(，它更清楚地展示了我的意思：https://codesandbox.io/s/scrolltotopdemo-dh3q3

基本上：

1. 在"；母成分"；，它控制列表组件的焦点
2. 使用react ref将焦点设置为输入元素https://reactjs.org/docs/hooks-reference.html#useref
3. 单击按钮时调用ScrollToTop组件中的函数