react 18 升级后 onScroll 不工作

onScroll is not working after React 18 upgrade

提问人:Thalariventhan K R 提问时间:11/1/2023 最后编辑:Thalariventhan K R 更新时间:11/3/2023 访问量:80

问:

滚动时未调用 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 工作?

javascript reactjs dom-events react-virtualized

评论


答:

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>
  );
};

沙盒示例在此处