Question

我有一个固定体型的桌子，如材质UI中所述。我想听一下表格的滚动事件，以便加载更多的行。

听这个卷轴的最佳方法是什么？

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

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

Answer 2

这不是直截了当的，也许材料表并不是最符合您要求的。您可能需要查看一些无限滚动的组件，例如react-infinite或react-list。

话虽这么说，我进行了一些实验，想出了这种拦截材料-ui桌面的滚动事件的方法。

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

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

然后，在componentDidMount（）中，将onscroll事件的事件侦听器添加到可滚动的div：

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

物料UI在桌面上听滚动（React）

2 个答案:

物料UI在桌面上听滚​​动（React）

2 个答案:

物料UI在桌面上听滚动（React）