材質UI滾動表格（React）

Question

我有一個表格，其材質大小已經解決，如材質界面中所述。 我想聽表的滾動事件，以加載更多的行。

哪個是最好的方法來聽這個滾動？

Answer 1

這不是直截了當，也許material-ui的表並不是最適合您的要求。你可能想看看一些無限滾動的組件，比如react-infinite或react-list。這就是說，我嘗試了一下，想出了在material-ui的TableBody中攔截滾動事件的方法。

首先，捕捉到你的表的屍體被包含在（其祖父元素在這種情況下）可滾動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); 
    }); 
} 

Answer 2

試過這沒有我的執行工作，第一個解決方案。

我得到這個使用material-ui@0.17.1和React@15.4.2工作：

創建一個表元素和裁判設置爲一個名字：

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

在componentDidMount，發現DOMNode使用ReactDOM.findDOMNode：

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

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

這會給你表的滾動事件。