Reactjs 物料iu：表格滚动到新页面顶部

我被这件事困扰了几天

当你点击“下一步”时，我没有找到在新页面顶部的方法，无论我做什么，我总是停留在底部

我已经检查了StackOverflow和GitHub，我发现这个问题似乎很接近：

我认为使用ref和callback是正确的方法，我已经尝试实现它了。然而，我总是停留在最后一个元素，我不能滚动到页面的顶部

我基于我的代码，该代码是material iu制作的表格页面

下面是我的代码示例

function DisplayList(props) {
   var rows = [];
   const data = props.data;
   const tableRef = React.createRef();
   const searchData = props.searchData;
   const setHoverAddress = props.setHoverAddress;

   const classes = useStyles1();

   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);

   const handleChangePage = (event, newPage) => {
       setPage(newPage);   
       if(tableRef.current) {tableRef.current.scrollTop = 0;}
   };

   const handleChangeRowsPerPage = (event) => {
       setRowsPerPage(parseInt(event.target.value, 10));
       setPage(0);
   };


   data.map((result, index) => { // WARNING : slice here which limits the number of results: .slice(0, 5)
       const volulme = Math.round(result.volulme);
       const volulme2 = Math.round(result.volulme2);

       rows.push(
       <div id={index}>
           <ListItem 
           alignItems="flex-start"
           onMouseEnter={e => {
               console.log(index);
           }}
           >
               <Grid container direction="row" spacing={1}>
                   <Grid item xs={5}>

                   {/* <Stage width={150} height={150}>
                       <Layer>
                       <Shape
                           sceneFunc={(context, shape) => {
                           context.beginPath();
                           context.moveTo(20, 10);
                           context.lineTo(120, 80);
                           context.lineTo(120, 140);
                           context.lineTo(22, 140);
                           context.closePath();
                           // (!) Konva specific method, it is very important
                           context.fillStrokeShape(shape);
                           }}
                           fill="#00D2FF"
                           stroke="black"
                           strokeWidth={2}
                       />
                       </Layer>
                   </Stage> */}

                   </Grid>
                   <Grid item xs={7}>
                   <ListItemText
                   primary={
                   }
                   secondary={
                       <React.Fragment>
                       <Typography
                           component="span"
                           variant="body2"
                           display="inline"
                           color="textPrimary"
                       >
                           Solid2 : {volulme2}
                       </Typography>
                       </React.Fragment>
                   }
                   />
                   <ListItemText
                   secondary={
                       <React.Fragment>
                       <Typography
                           component="span"
                           variant="body2"
                           display="inline"
                           color="textPrimary"
                       >
                           Solid : {volulme}
                       </Typography>
                       </React.Fragment>
                   }
                   />
                   <FormControlLabel
                   control={
                       <Checkbox icon={<FavoriteBorder />} 
                       checkedIcon={<Favorite />} 
                       color="primary"
                       onClick={(e) => {
                           if (e.target.checked) {
                               addFavourite(parc_id, 1)
                           } else {
                               removeFavourite(parc_id, 1)
                           }
                       }}
                       name="checkedH" />
                   }
                       label="Enregistrer"
                   />
                   </Grid>
               </Grid>
           </ListItem>
       </div>
       )
   })


   return (
           <Table className={classes.table} aria-label="custom pagination table">
               <TableBody>
               {(rowsPerPage > 0
                   ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   : rows
               ).map((row) => (
                   <TableRow key={index}>
                       <TableCell component="th" scope="row">
                         <div ref={tableRef}>
                           {row}
                          </div>
                       </TableCell>
                   </TableRow>
               ))}
               </TableBody>
               <TableFooter>
                   <TableRow>
                       <TablePagination
                       rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                       colSpan={3}
                       count={rows.length}
                       rowsPerPage={rowsPerPage}
                       page={page}
                       SelectProps={{
                           inputProps: { 'aria-label': 'rows per page' },
                           native: true,
                       }}
                       onChangePage={handleChangePage}
                       onChangeRowsPerPage={handleChangeRowsPerPage}
                       ActionsComponent={TablePaginationActions}
                       />
                   </TableRow>
               </TableFooter>
           </Table>
   )
}

功能显示列表（道具）{
var行=[]；
const data=props.data；
const tableRef=React.createRef（）；
const searchData=props.searchData；
const setHoverAddress=props.setHoverAddress；
const classes=useStyles1（）；
const[page，setPage]=useState（0）；
const[rowsPerPage，setRowsPerPage]=useState（5）；
const handleChangePage=（事件，新页面）=>{
设置页面（新页面）；
如果（tableRef.current）{tableRef.current.scrollTop=0；}
};
常量handleChangeRowsPerPage=（事件）=>{
setRowsPerPage（parseInt（event.target.value，10））；
设置页面（0）；
};
data.map（（result，index）=>{//警告：此处的切片限制了结果的数量：。切片（0，5）
const volulme=Math.round（result.volulme）；
const volulme2=Math.round（result.volulme2）；
推(
{
控制台日志（索引）；
}}
>
{/* 
{
context.beginPath（）；
上下文。moveTo（20,10）；
lineTo（120,80）；
lineTo（120140）；
lineTo（22140）；
closePath（）；
//（！）Konva的具体方法，非常重要
fillStrokeShape（形状）；
}}
fill=“#00D2FF”
stroke=“黑色”
冲程宽度={2}
/>
*/}
}
label=“Enregister”
/>
)
})
返回(
{（rowsPerPage>0）
？行.切片（第页*行页面，第页*行页面+行页面）
：行
).map（（行）=>(
{row}
))}
)
}

谢谢你的时间和回答

---

祝您度过愉快的一天

您在表中添加了一个ref，并在

handleChangePage

代码片段

。。。
const handleChangePage=（事件，新页面）=>{
ref.current.scrollIntoView（）；//滚动到表的开头
//scrollTo（{top:0，行为：'smooth'}）//滚动到页面顶部
设置页面（新页面）；
};
...
...