Question

我想使表格在ant design上滚动，但是ant design表没有onScroll（事件）

问题： https://github.com/ant-design/ant-design/issues/5904

他们建议像这样的解决方案

componentDidMount() {
...
var tableContent = document.querySelector('.ant-table-body')
    tableContent.addEventListener('scroll', (event) => {
      // checking whether a selector is well defined
      console.log('yes, I am listening')
      let maxScroll = event.target.scrollHeight - event.target.clientHeight
      let currentScroll = event.target.scrollTop
      if (currentScroll === maxScroll) {
         // load more data
      }
    })
...
}

他在id为“ .ant-table-body”的元素上添加了滚动事件；

还有人说“更好地使用裁判”

您能告诉我如何使用引用解决问题（在ant表上添加滚动事件）吗？

当我知道id'.ant-table-body'时，如何使用引用来引用该组件。请注意，我无法访问组件“ .ant-table-body”。

是这样的：tableRef = refs.findById（'。ant-table-body'）？或tableRefs = refs.addRefToId（'。ant-table-body'）

Answer 1

首先向表中添加一个引用，如下所示：

<Table ref={table => { this.table = table }}

然后在componentDidMount中，您可以像这样向其添加相同的事件侦听器：

componentDidMount() {
   if(this.table) {
      this.table.addEventListener('scroll', (event) => {
         // do your stuff here
      })
   }
}

知道ID时添加引用以反应组件

1 个答案: