提问人:Thalariventhan K R 提问时间:11/1/2023 最后编辑:Thalariventhan K R 更新时间:11/3/2023 访问量:80
react 18 升级后 onScroll 不工作
onScroll is not working after React 18 upgrade
问:
滚动时未调用 onScroll 回调 (scrollHandler)。在我们从 react 16 升级到 react 18 之后,发生了这个问题。
套餐详细信息
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-virtualized": "^9.13.0",
代码片段
const TableComponent = (props) => {
let { scrollHandler, getRow, width, height, rowCount, rowHeight, getRow } = props;
return (
<div
onScroll={scrollHandler}
>
<AutoSizer>
{({ width, height }) => {
return (
<List
width={width}
height={height}
rowCount={rowCount}
rowHeight={rowHeight}
rowRenderer={getRow}
columnWidth={150}
style={{ maxHeight: maxHeight }}
/>
);
}}
</AutoSizer>
</div>
);
};
我尝试直接添加自动调整器。我尝试使用 ref 添加到标签中。但没有奏效。 有没有办法让 onScroll 工作?
答:
0赞
David J
11/1/2023
#1
您是否尝试过将设置了 onScroll 道具的父 div 样式添加到您的父 div 样式中?overflow: 'scroll'
评论
0赞
Thalariventhan K R
11/1/2023
我将父组件样式更改为 .它仍然不起作用。overflow: 'scroll'
0赞
Ahmed Ali Rajput
11/1/2023
#2
如果“onscroll”不起作用,您可以尝试使用事件侦听器。
useEffect(() => {
const handleScroll = event => {
console.log('hello scroll listener', event);
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
此代码将向窗口添加一个侦听器,并在窗口滚动时触发“handleScroll”函数。
评论
0赞
Thalariventhan K R
11/1/2023
我按照建议尝试了这个,我也尝试了 window.onscroll。但这种方法也行不通。
0赞
Ahmed Ali Rajput
11/2/2023
这个片段不可能工作,我先尝试了一下,然后与你分享
0赞
Thalariventhan K R
11/2/2023
它在 react 16 中工作,但在 react 18 升级后,相同的代码不起作用。连我都不确定原因。
0赞
Ahmed Ali Rajput
11/2/2023
我在 React 18 上尝试了这段代码,它在那里工作正常。你可能做错了什么。请分享您的代码,以便我检查可能的问题是什么。
0赞
Thalariventhan K R
11/3/2023
当然,我在 codesandbox 的分叉存储库中尝试过类似的示例。行为是一样的。公共沙盒链接 - codesandbox.io/p/sandbox/...
1赞
Ahmed Ali Rajput
11/3/2023
#3
以下是您要求的沙盒代码:
import React, { useEffect, useRef } from 'react';
import { AutoSizer, MultiGrid } from "react-virtualized";
import styles from "./ScrollSyncExample.css";
export default () => {
const [state] = React.useState({
fixedColumnCount: 1,
fixedRowCount: 1,
scrollToColumn: 0,
scrollToRow: 0,
});
const divRef = useRef(null);
const _cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
return (
<div className={styles.Cell} key={key} style={style}>
{rowIndex === 0 ? (
`Header: ${columnIndex}- ${rowIndex}`
) : (
<span>{`${columnIndex} - ${rowIndex}`}</span>
)}
</div>
);
};
const handleScroll = (scrollInfo) => {
var scrollLeft = scrollInfo.scrollLeft;
var scrollTop = scrollInfo.scrollTop;
console.log("Scroll Left:", scrollLeft, "Scroll Top:", scrollTop);
// Perform any other actions you want to do on scroll.
};
return (
<div>
<AutoSizer disableHeight>
{({ width }) => (
<MultiGrid
{...state}
cellRenderer={_cellRenderer}
columnWidth={75}
columnCount={50}
enableFixedColumnScroll
enableFixedRowScroll
height={300}
rowHeight={70}
rowCount={100}
width={width}
hideTopRightGridScrollbar
hideBottomLeftGridScrollbar
hideBottomRightGridScrollbar
onScroll={({ scrollLeft, scrollTop }) =>
handleScroll({ scrollLeft, scrollTop })
}
/>
)}
</AutoSizer>
</div>
);
};
上一个:羽毛笔提及:单击列表时触发事件
下一个:X 在切换到 O 之前需要两圈
评论