У меня есть всплывающее окно в заголовке моей таблицы реакций
const column = [{
Header: () =>
<div>
<Popup className="column-order-popup"
closeOnDocumentClick
open={wasPopupOpen}
repositionOnResize
trigger={<div className="eye-icon">
<img src={icon}/>
</div>}
on="click"
position="bottom left">
<div className="column">
{generate()}
</div>
</Popup>
</div>,
fixed: "left",
sortable: false,
headerClassName: "table-header-class",
className: "table-row-class",
width: 70
}];
const generate = () => {
return (
<div className="checkbox-react-table">
<img onClick={(e) => handleToggleShowColumnClick()} alt="image"
src={checkboxMarked}/>
</div>
)
};
const handleToggleShowColumnClick = () => {
... some removes from array...
setWasPopupOpen(false);
setWasPopupOpen(true);
};
У меня есть флажок внутри всплывающего окна, который устанавливает видимость столбца, поэтому он повторно отображает aws таблицу. После того, как я установил флажок, всплывающее окно закрывается - я думаю, это из-за повторного рендеринга.
Мне не нравится такое поведение, и я установил wasPopupOpen в false, а затем в true. Он открывается снова, но с другой позицией прокрутки.
Итак: 1. Можно ли избежать закрытия всплывающего окна при повторном рендеринге, и если да, то как? 2. Если нет, то как я могу рассчитать положение прокрутки всплывающего окна и установить его снова после того, как всплывающее окно снова откроется?
PS Я установил свой div с всплывающим окном с ref. Я объявил следующее
const popupRef = useRef(null);
const scrollToRef = (ref) => window.scrollTo(10, 33, ref.current.offsetTop)
useEffect(() => {
console.log(popupRef)
scrollToRef(popupRef)
})
главное окно - изменение всплывающего контейнера. Мне нужно изменить прокрутку всплывающего окна
Спасибо!