第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何將焦點(diǎn)移動(dòng)到 React js 中的項(xiàng)目?

如何將焦點(diǎn)移動(dòng)到 React js 中的項(xiàng)目?

慕斯王 2022-12-22 09:34:56
我已經(jīng)在我的演示應(yīng)用程序中實(shí)現(xiàn)了一個(gè)無限滾動(dòng)的列表。單擊任何行它將轉(zhuǎn)到detail screen。它工作正常。**我面臨著關(guān)注最后選定行的問題**換句話說運(yùn)行應(yīng)用程序。加載第一個(gè)20項(xiàng)目。滾動(dòng)到底部以加載更多 20 個(gè)項(xiàng)目。然后單擊任何項(xiàng)目讓說33rd row 。它將顯示33在詳細(xì)信息頁面中。現(xiàn)在單擊back它顯示焦點(diǎn)的按鈕0或第一行。我想將焦點(diǎn)移動(dòng)到33行?;蛘邔L動(dòng)位置移動(dòng)到33位置。我使用useContextapi 來存儲items(所有行/數(shù)據(jù)直到最后一次滾動(dòng))和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貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

在重定向到詳細(xì)頁面并將其存儲在狀態(tài)之前使用它。

let position = document.documentElement.scrollTop

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

window.scrollTo(0, position)

回到你最初所在的地方。


查看完整回答
反對 回復(fù) 2022-12-22
?
RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

您的元素位置可能只有一個(gè)真實(shí)來源。作為示例,我將位置狀態(tài)放在 Router 組件上,因?yàn)檫@似乎是 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


查看完整回答
反對 回復(fù) 2022-12-22
  • 2 回答
  • 0 關(guān)注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號