如何将焦点移动到 React js 中的项目？

Question

我已经在我的演示应用程序中实现了一个无限滚动的列表。单击任何行它将转到detail screen。它工作正常。**我面临着关注最后选定行的问题**换句话说运行应用程序。加载第一个20项目。滚动到底部以加载更多 20 个项目。然后单击任何项目让说33rd row 。它将显示33在详细信息页面中。现在单击back它显示焦点的按钮0或第一行。我想将焦点移动到33行。或者将滚动位置移动到33位置。我使用useContextapi 来存储items（所有行/数据直到最后一次滚动）和selected item（选定的索引）。这是我的代码 https://codesandbox.io/s/dank-cdn-2osdg?file=/src/useInfinitescroll.jsimport React from "react";import { withRouter } from "react-router-dom";import { useListState } from "./context";function Detail({ location, history }) {  const state = useListState();  console.log(state);  return (    <div className="App">      <button        onClick={() => {          history.replace({            pathname: "/"          });        }}      >        back      </button>      <h2>{location.state.key}</h2>      <h1>detaiils</h1>    </div>  );}export default withRouter(Detail); any update?

Answer 1

在重定向到详细页面并将其存储在状态之前使用它。

let position = document.documentElement.scrollTop

这将给出您在页面上的当前位置。一旦你回到列表视图使用

window.scrollTo(0, position)

回到你最初所在的地方。

Answer 2

您的元素位置可能只有一个真实来源。作为示例，我将位置状态放在 Router 组件上，因为这似乎是 App 组件和 Details 的父级。

const Router = () => {

  const [previousClickedItemPos, setPreviousClickedItemPos] = useState(0);

  

  /* import useLocation so that useEffect can be invoked on-route-change */

  const location = useLocation();

  /* basically pass this to the list items so you can update position on-click */

  function handleClickList(element) {

    setPreviousClickedItemPos(element);

  }

  useEffect(() => {

    /* scroll to the element previously selected */

    window.scrollTo(0, previousClickedItemPos);

  }, [previousClickedItemPos, location]);

  ...

在您的 InfiniteList 组件上：

<ListItem

    onClick={e => {

        dispatch({

            type: "set",

            payload: items

        });

        handleClickList(e.target.offsetTop); /* update position state */

        goDetailScreen(item);

    }}

    key={item.key}

>

    {item.value}

</ListItem>

代码沙盒： https ://codesandbox.io/s/modern-breeze-nwtln ?file=/src/router.js