как переместить фокус на элемент в React js? - PullRequest
Новая
       177

как переместить фокус на элемент в React js?

0 голосов
/ 05 августа 2020

Я реализовал список с бесконечной прокруткой в ​​моем демонстрационном приложении. При щелчке любой строки он будет от go до detail screen. Он работает нормально.

** Я столкнулся с проблемой, чтобы сфокусировать последнюю выбранную строку ** Другими словами

  1. Запустить приложение .it загрузить сначала 20 элементов. Прокрутите вниз, чтобы загрузить еще 20 элементов.
  2. Затем щелкните любой элемент, например, 33 rd строку. на странице подробных сведений отобразится 33.
  3. Теперь нажмите кнопку back, он покажет фокус на 0 или первой строке. Я хочу переместить фокус на строку 33. Или Переместить позицию прокрутки в положение 33.

Я использую useContext api для хранения items (все строки / данные до последнего scroll) и selected item (выбранный индекс).

вот мой код https://codesandbox.io/s/dank-cdn-2osdg?file= / src / useInfinitescroll. js

import 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 ]

1 голос
/ 05 августа 2020

Используйте это перед перенаправлением на страницу с подробными сведениями и сохраните ее в состоянии. 

let position = document.documentElement.scrollTop

Это даст ваше текущее положение на странице. Как только вы вернетесь к списку, используйте 

window.scrollTo(0, position)

на go, чтобы вернуться туда, где вы были изначально.

0 голосов
/ 05 августа 2020

У вас может быть единственный источник истины для позиции вашего элемента. В качестве примера я помещаю состояние позиции в компонент 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>

CodeSandBox: https://codesandbox.io/s/modern-breeze-nwtln?file= / src / router. js

...