Material UI 듣기 테이블에서 스크롤 (React)

Question

재질 UI에서 설명한대로 본체 크기가 고정 된 테이블이 있습니다. 더 많은 행을로드하기 위해 테이블의 scroll 이벤트를 듣고 싶습니다.

이 스크롤을 듣는 가장 좋은 방법은 무엇입니까?

Answer 1

이것은 간단하지 않으며 material-ui의 표가 요구 사항에 가장 적합하지 않을 수 있습니다. 반응 무한 또는 반응 목록과 같은 무한 스크롤 구성 요소를 살펴볼 수 있습니다.

그런데, 나는 조금 실험을했고 물질 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 가지고 componentDidMount에서

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

을 찾을 DOMNode 사용 ReactDOM.findDOMNode는 :

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

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

이렇게하면 테이블의 스크롤 이벤트를 제공 할 것입니다.