Material UI hören Blättern auf Tabelle (React)

Question

Ich habe eine Tabelle mit einer Körpergröße behoben, wie in der Material UI erläutert. Ich möchte auf das Bildlaufereignis der Tabelle hören, um mehr Zeilen zu laden.

Welches ist der beste Ansatz, um diese Rolle zu hören?

Answer 1

Dies ist nicht einfach und vielleicht Material-Ui-Tabelle ist nicht die beste für Ihre Anforderungen. Vielleicht möchten Sie sich einige endlos scrollende Komponenten wie react-infinite oder react-list ansehen.

Das gesagt, experimentierte ich ein bisschen und kam mit dieser Methode des Abfangens des Scroll-Ereignisses in Material-ui's TableBody.

Zuerst einen Verweis auf die scrollbaren div erfassen, die den Körper Ihres Tisch in (seiner Großeltern Element in diesem Fall) enthalten ist:

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

dann in componentDidMount(), fügen Sie einen Ereignis-Listener für die onscroll Ereignis zum scrollbaren div:

Answer 2

Versuchte die erste Lösung, die nicht mit meiner Implementierung arbeitete.

Ich habe diese Arbeit mit material-ui@0.17.1 und React@15.4.2:

ein Tabellenelement erstellen und den Referee auf einen Namen festgelegt:

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

In componentDidMount finden der DOMNode, der ReactDOM.findDOMNode verwendet:

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

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

Dadurch erhalten Sie das Bildlaufereignis der Tabelle.