如何以编程方式重置 react-table 中的滚动条

Question

我希望能够在加载新数据时将滚动位置重置为 0。截至目前，当新数据作为道具传递时，滚动位置仍然存在。这会给用户带来一些困惑。

编辑：滚动在 React-Table 组件中，而不是页面滚动。

Answer 1

是的，您可以通过编程重置滚动到顶部使用组件更新生命周期componentDidUpdate() { window.scrollTo(0,o); }

Answer 2

找到解决方案。我使用了一个完美的滚动条组件，我用 table 的传递对象做了一个引用，这样我就可以调用 this.scroll.scrollbar.scrollTo(0,0) 来重置 table 滚动条。

const PerfectScrollbarBody = (props, table) => (
   <div {...props} className={"rt-tbody"}>
      <Scrollbar ref={node => (table.scroll = node)}>{props.children}</Scrollbar>
   </div>
);

Answer 3

我认为这可以像这样简单地工作。

export function resetScrollInsideTable(indexTable) {
  let tableBody = document.getElementsByClassName('rt-tbody')[indexTable];
  tableBody.scrollTop = 0;
}

假设您在 DOM 中有 2 个 react-table 组件。如果你想重置第一个反应的滚动-table，在你的获取数据中使用它，或者你的按钮点击查询然后显示数据。

resetScrollInsideTable(0)

并为第二次反应进行重置-table

resetScrollInsideTable(1)

如何以编程方式重置 react-table 中的滚动条

How to programmatically reset scroll in react-table

javascript

reactjs

react-table