Остановить перемещение полосы прокрутки вверх при рендеринге reactjs - PullRequest
Новая
       24

Остановить перемещение полосы прокрутки вверх при рендеринге reactjs

1 голос
/ 28 апреля 2020

Я пытаюсь создать панель, на которой представлен список элементов, при щелчке по элементу справа должен отображаться выбранный элемент. Левая сторона должна содержать список предметов. Список элементов может быть очень длинным, поэтому я ограничил максимальную высоту списка так, что, когда он превышает эту высоту, он создаст полосу прокрутки, чтобы пользователь мог прокрутить вниз, чтобы увидеть остальную часть списка. Проблема заключается в том, что всякий раз, когда нажимается элемент в нижней части списка, список автоматически прокручивается обратно вверх. У меня есть ощущение, что это связано с тем, что я использую состояние для передачи элемента, и когда элемент изменяется, это вызывает повторную визуализацию, таким образом «сбрасывая» список. Может ли кто-нибудь подсказать мне, как я могу предотвратить это? Любые указатели будут с благодарностью!

Вот песочница: https://codesandbox.io/s/sad-archimedes-3u4k0?file= / src / App. js

ex / прокрутите вниз и нажмите " random30 "и список возвращается к« random1 »

1 Ответ

1 голос
/ 28 апреля 2020

Это происходит потому, что вы поместили компонент EventListContainer внутри EventsList компонента, что приведет к «повторному рендерингу» при каждом обновлении состояния.

Вы можете просто переместите ScrollContainer непосредственно внутри компонента EventsList return: 

return (
  <ListContainer>
    <ScrollContainer>
      {eventListSorted.map(event => {
        return (
          <EventContainer
            onClick={e => {
              onSelect(event);
              setSelectedEvent(event);
            }}
            selected={selectedEvent ? selectedEvent.id === event.id : false}
          >
            {event.uiString}
          </EventContainer>
        );
      })}
    </ScrollContainer>
  </ListContainer>
);

Также лучше переместить массив eventListSorted за пределы компонента EventsList.

песочница пример.

...