时间戳

首页 > 解决方案 > 在知道 id 时添加 refs 以响应组件

reactjs - 在知道 id 时添加 refs 以响应组件

问题描述

我想在 ant design scroll 上制作表格，但 ant design table 没有 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' 的元素上添加了滚动事件；

还有人说“最好使用参考”

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

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

像这样：tableRef = refs.findById('.ant-table-body')？或 tableRefs = refs.addRefToId('.ant-table-body')

标签： reactjsantd

解决方案

首先向您的表添加一个 ref，如下所示：

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

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

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

推荐阅读