Материал UI прослушивание прокрутки на столе (React)

Question

У меня есть таблица с размером тела, как описано в интерфейсе материалов. Я хотел бы прослушать событие прокрутки таблицы, чтобы загрузить больше строк.

Каков наилучший способ прослушивания этого свитка?

Answer 1

Это не просто и, возможно, материал-ui Table не подходит для ваших требований. Вы можете взглянуть на некоторые бесконечно-прокручивающие компоненты, например реагировать-бесконечно или реагировать-список.

Это было сказано, я немного экспериментировал и придумал этот метод перехвата события прокрутки в TableBody материала-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); 
    }); 
} 

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

Это даст вам событие прокрутки таблицы.