滚动到在React中提交时搜索的结果

Question

我在React Web应用程序中进行了实时搜索，并希望在用户键入搜索词后按Enter键滚动到搜索结果的标题。我试图在我的handleDefault函数中使用element.scrollTo，但无法弄清楚如何选择一个元素，该元素是其他组件中的样式组件。

这是我在搜索组件中的handleDefault函数：

function handleDefault(event) {
    return (
      event.preventDefault() || event.target.blur() || element.scrollTo()
    )
  }

搜索结果。我想滚动到标题

export default function DishList() {
...

return (
    <DishListStyled>
      <HeadlineStyled id="headline">
        Search results
      </HeadlineStyled>
      <SearchResultStyled>
...

Answer 1

您可以在这里使用ref ..

export default function DishList() {
const headLineRef = React.createRef();
...

return (
    <DishListStyled>
      <HeadlineStyled id="headline" ref="headlineRef">
        Search results
      </HeadlineStyled>
      <SearchResultStyled>
...

在handleDefault内，您可以将焦点设置为参考。

function handleDefault(event) {
    headLineRef.current.focus();
  }