Material UI 监听滚动表（React）答案

【问题标题】：Material UI listen scroll on table (React)Material UI 监听滚动表（React）
【发布时间】：2017-04-12 15:22:11
【问题描述】：

我有一个固定尺寸的表格，如 Material UI 中所述。我想听一下表格的滚动事件以加载更多的行。

收听此卷轴的最佳方法是什么？

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

尝试了第一个不适用于我的实现的解决方案。

我使用 material-ui@0.17.1 和 React@15.4.2 完成了这项工作：

创建一个表格元素并将 ref 设置为一个名称：

<Table>
    ...
    <TableBody ref="table-body">
        ...
    </TableBody>
</Table>

在componentDidMount中，使用ReactDOM.findDOMNode找到DOMNode：

componentDidMount() {
    let tableBodyNode = ReactDOM.findDOMNode(this.refs["table-body"]).parentNode.parentNode;

    tableBodyNode.addEventListener('scroll', (e) => {
        console.log(e);
    });
}

这将为您提供表格的滚动事件。

【讨论】：

我们用 parentNode.parentNode 处理这个滚动监听器的方式有点奇怪我记得我最终使用了github.com/janpaepke/ScrollMagic，但仍然不是解决这个问题的好方法。
别忘了删除componentWillUnmount()中的事件监听器

【解决方案2】：

这并不简单，也许 material-ui 的表格不是最适合您的要求。您可能想看看一些无限滚动的组件，例如 react-infinite 或 react-list。

话虽如此，我试验了一下，想出了这个在material-ui的TableBody中拦截滚动事件的方法。

首先，捕获对包含表格主体的可滚动 div 的引用（在本例中为它的祖父元素）：

<Table height={200}>
  ...
  <TableBody
    ref={ref => { this.viewport = ReactDOM.findDOMNode(ref).parentNode.parentNode; } }>
  ...

然后，在 componentDidMount() 中，为可滚动的 div 添加 onscroll 事件的事件监听器：

componentDidMount() {
  this.viewport.addEventListener('scroll', (e) => {
    console.log(e);
  });
}

【讨论】：

有没有办法滚动到行的底部？我只是尝试调整您的解决方案以设置 scrollTop。但它给了我Cannot read property 'parentNode' of null的警告。