时间戳

首页 > 解决方案 > 列表数据更改时，材质 UI 列表滚动不会重置

reactjs - 列表数据更改时，材质 UI 列表滚动不会重置

问题描述

我有一个简单的项目清单。

      <List>
        {this.state.initialList.map((item, index) => (
          <ListItem key={index} button>
            <ListItemText primary={item} />
          </ListItem>
        ))}
      </List>

如果我滚动到列表底部并加载一个新列表，则滚动将停留在底部。如何滚动回列表顶部？

https://codesandbox.io/s/material-demo-l4i3s

在这个沙箱中，滚动到底部，单击“加载”，列表显示新列表的最后一项。

标签： reactjsmaterial-ui

解决方案

不确定是否可以使用 material-ui 设置默认设置来执行此操作。但是你绝对可以应用一些 React 功能来让它工作。

查看工作沙箱：https ://codesandbox.io/s/material-demo-8ftqz

创建一个指向列表顶部的 ref：

  topOfList = React.createRef();

然后在您的列表组件中，返回列表顶部的跨度。给那个跨度你装箱的参考。

      <List component="nav" aria-label="secondary mailbox folders">
        {<span ref={this.topOfList} />}
        {this.state.initialList.map((item, index) => (
          <ListItem key={index} button>
            <ListItemText primary={item} />
          </ListItem>
        ))}
      </List>

创建一个滚动到元素/引用的附加处理程序：

  scrollToTop = () => {
    if (this.topOfList.current) {
      this.topOfList.current.scrollIntoView();
    }
  };

最后，在 set-state 回调中使用处理程序，以确保在加载数据后向上滚动。

this.setState({ initialList: newList }, () => this.scrollToTop())

推荐阅读