亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將焦點移動到 React js 中的項目?

如何將焦點移動到 React js 中的項目?

慕斯王 2022-12-22 09:34:56
我已經在我的演示應用程序中實現了一個無限滾動的列表。單擊任何行它將轉到detail screen。它工作正常。**我面臨著關注最后選定行的問題**換句話說運行應用程序。加載第一個20項目。滾動到底部以加載更多 20 個項目。然后單擊任何項目讓說33rd row 。它將顯示33在詳細信息頁面中?,F在單擊back它顯示焦點的按鈕0或第一行。我想將焦點移動到33行?;蛘邔L動位置移動到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?
查看完整描述

2 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

在重定向到詳細頁面并將其存儲在狀態之前使用它。

let position = document.documentElement.scrollTop

這將給出您在頁面上的當前位置。一旦你回到列表視圖使用

window.scrollTo(0, position)

回到你最初所在的地方。


查看完整回答
反對 回復 2022-12-22
?
RISEBY

TA貢獻1856條經驗 獲得超5個贊

您的元素位置可能只有一個真實來源。作為示例,我將位置狀態放在 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


查看完整回答
反對 回復 2022-12-22
  • 2 回答
  • 0 關注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號