在 React.js 中为滚动事件添加事件侦听器后未获得回调 [英] Not getting callback after adding an event listener for scroll event in React.js

问题描述

我按照这篇文章中的说明进行操作在 React.js 中更新 onScroll 组件的样式为滚动事件注册事件监听器.

我有一个 React 组件，它从 React-Bootstrap 库中呈现一个 Table 组件 https://react-bootstrap.github.io/

我想我正确注册了事件监听器，但我不确定为什么当我向下滚动表格时，我的 handleScroll() 回调没有被调用.是不是因为事件监听器没有在实际的表本身上注册?

感谢您花时间阅读我的问题.任何反馈表示赞赏.

这是我如何注册事件侦听器的片段.

 handleScroll: function(event) {console.log('handleScroll 被调用');},componentDidMount:函数(){console.log('componentDidMount 调用');window.addEventListener('scroll', this.handleScroll);},componentWillUnmount:函数(){console.log('componentWillUnmount 被调用');window.removeEventListener('scroll', this.handleScroll);},

这是我的渲染函数的片段.

 渲染:function() {var tableRows = this.renderTableRow(this.props.sheet);返回 (<表格条纹边框浓缩悬停><表头容器tableTemplateName={this.props.tableTemplateName}sheetName={this.props.sheet.name}/>{tableRows}</tbody></表>);}

解决方案

您的代码看起来不错，因此滚动的可能不是窗口本身.表格是否放置在 div 或具有 overflow: auto 或 overflow:scroll 的东西内?如果是这样，则侦听器必须附加到正在滚动的实际元素，例如

document.querySelector('.table-wrapper').addEventListener('scroll', this.handleScroll);

如果是这种情况，那么只需在代码中的包装器中添加一个 React onScroll 处理程序会更好

I followed the instruction from this post Update style of a component onScroll in React.js to register event listener for scroll event.

I have a React component that renders a Table component from the React-Bootstrap library https://react-bootstrap.github.io/

I think I registered the event listener correctly but I am not sure why when I scroll down the table, my handleScroll() callback is not getting invoked. Is it because the event listener is not registered on the actual table itself?

Thanks for taking your time reading my question. Any feedback is appreciated.

Here's a snippet of how I register for the event listener.

  handleScroll: function(event) {
    console.log('handleScroll invoked');
  },

  componentDidMount: function() {
    console.log('componentDidMount invoked');
    window.addEventListener('scroll', this.handleScroll);
  },

  componentWillUnmount: function() {
    console.log('componentWillUnmount invoked');
    window.removeEventListener('scroll', this.handleScroll);
  },

Here's a snippet of my render function.

  render: function() {

    var tableRows = this.renderTableRow(this.props.sheet);

    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }

解决方案

Your code looks good, so it's probably not the window itself that is scrolling. Is the table placed inside a div or something that has overflow: auto or overflow:scroll? If so, the listener must be attached to the actual element that is scrolling, e.g.

document.querySelector('.table-wrapper')
    .addEventListener('scroll', this.handleScroll);

If this is the case, then just adding a React onScroll handler to the wrapper in your code would be better

<div onScroll={this.handleScroll}><Table....

这篇关于在 React.js 中为滚动事件添加事件侦听器后未获得回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！